I want to change the HTML text displayed by: #shadow root (user-agent)

Question

Thanks for your help. After looking everywhere on the web I didn't find help to change (not to create) an html text in a #shadow-root: delete the comma (for french format). (Big numbers: Thousand separator for US numbers format)

Here is the html source code:

<div id="numbers">
    <input type="text"  id="sleeping"></input>
</div>

Here is the code in the browser DevTools (F12) in Chrome!

<div id="numbers">
    <span class="e-widget e-pinch e-numeric e-valid">
        <span class="e-in-wrap e-box e-padding">
            <input type="text" data-role="none" tabindex="0" accesskey="" value="8000" class="e-input" style="display: block;">
                #shadow-root (user-agent)
                <div>8,000</div>
            </input>
            <input type="text" id="sleeping" class="e-numerictextbox e-js e-input" tabindex="" accesskey="" name="sleeping" role="spinbutton" aria-valuemin="0" aria-valuemax="10000" aria-valuenow="8000" aria-live="assertive" value="8000" style="display: none;">
                #shadow-root (user-agent) == $0
                <div>8000</div>
            </input>
            <span class="e-select">
                <span class="e-spin e-spin-up " role="button" "aria-label"="Increase Value" unselectable="on">
                    <span class="e-icon e-arrow e-arrow-sans-up" role="presentation" unselectable="on">
                        ::before
                    </span>
                </span>
                <span class="e-spin e-spin-down" role="button" "aria-label"="Decrease Value" unselectable="on">
                    <span class="e-icon e-arrow e-arrow-sans-down" role="presentation" unselectable="on">
                        ::before
                    </span>
                </span>
            </span>
        </span>
    </span>
</div>

So I want to delete the comma: 8,000 to 8000 with a Javascript code. But I do not know how to access the div <div>8,000</div> under #shadow-root Thanks for the help!

`parseInt(document.querySelector("#shadow-root").innerText.replace(/[, ]/g, ""))` should do the trick — J-Cake, Nov 26 '18 at 10:52

score 1 · Answer 1 · answered Nov 26 '18 at 09:55

1

First you need to get the shadowRoot of the element, then find its child node and update the content.

    const input = document.getElementsByTagName("input")[0];
    const shadow = input.shadowRoot;
    const element = shadow.firstChild; // the div you want to access
    element.innerHtml = element .innerHtml.replace(/\,/g,'');

answered Nov 26 '18 at 09:55

Stundji

855
7
17

Thank you Stundji! But it gives an error message: Uncaught TypeError: Cannot read property 'firstChild' of null – JeanLarmurier Nov 26 '18 at 10:20
And it doesn't find < div>8,000< /div> //The number with comma (,) – JeanLarmurier Nov 26 '18 at 10:23
Then you will need to provide a working example so I can work on your code. You can use https://jsfiddle.net/ – Stundji Nov 26 '18 at 11:42

score 0 · Answer 2 · answered Nov 26 '18 at 16:50

0

Here a picture: that's the Chrome DevTools (F12) displaying; I want to get "value: 4,000" in a var.

HTMLCollection: get value

answered Nov 26 '18 at 16:50

JeanLarmurier

31
4

If I could get var MyVar = 4,000; I could transform it to 4000 (without comma) in my web site page. – JeanLarmurier Nov 26 '18 at 16:51

score 0 · Answer 3 · answered Mar 09 '23 at 09:44

It's probably user-agent shadow-root. I am looking for a way to manipulate it right now, I have found already some information that you can't do it, since it's not in open mode and you cannot put it in that mode...

How to get element in user-agent shadow root with JavaScript?

I want to change the HTML text displayed by: #shadow root (user-agent)

3 Answers3