Javascript document.getElementById multiple times on page

Question

We create a script that gets the innerhtml of a element with specific class. This works perfect for the first <table>. But the script does not work for the second <table>.

I guess this is due to the getElementbyID. How can we edit our script, so it will work for each table?

HTML:

<table>
<tbody>
    <tr>
        <td class="image" rowspan="8">
            <div class="myedit" id="MyEdit"></div>
        </td>
        <td class="order" colspan="2">Text</td>
    </tr>
    <tr>
        <td>
            <div class="input-box">
                <ul id="options-183-list" class="options-list">
                    <li class="product-option active">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" checked="" name="options[183]" id="options_183_2" value="591" price="0">
                        </span>
                        <label for="options_183_2">
                            <span class="option-name">Product option 1</span>
                            <span class="option-sku">SKU1</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                    <li class="product-option">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" name="options[183]" id="options_182_2" value="590" price="0">
                        </span>
                        <label for="options_183_1">
                            <span class="option-name">Product option 2</span>
                            <span class="option-sku">SKU2</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
</tbody>
</table>

<table>
<tbody>
    <tr>
        <td class="image" rowspan="8">
            <div class="myedit" id="MyEdit"></div>
        </td>
        <td class="order" colspan="2">Text</td>
    </tr>
    <tr>
        <td>
            <div class="input-box">
                <ul id="options-181-list" class="options-list">
                    <li class="product-option active">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" checked="" name="options[181]" id="options_181_2" value="578" price="0">
                        </span>
                        <label for="options_181_2">
                            <span class="option-name">Product option 1</span>
                            <span class="option-sku">SKU1</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                    <li class="product-option">
                        <span class="input-radio">
                            <input type="radio" class="radio  validate-one-required-by-name product-custom-option" onclick="opConfig.reloadPrice()" name="options[181]" id="options_181_2" value="579" price="0">
                        </span>
                        <label for="options_181_1">
                            <span class="option-name">Product option 2</span>
                            <span class="option-sku">SKU2</span>
                            <span class="price-notice default">€0</span>
                        </label>
                    </li>
                </ul>
            </div>
        </td>
    </tr>
</tbody>
</table>

<script type="text/javascript">     
    $(document).ready(function () {
        $('input').click(function () {
            var sku = $('input:checked').closest('.product-option').find('.option-sku').html();
            document.getElementById("MyEdit").innerHTML = sku
        });
        var sku = $('input:checked').closest('.product-option').find('.option-sku').html();
            document.getElementById("MyEdit").innerHTML = sku
    });
</script>

You don't need `document.getElementById` if you are using jQuery. Why can't you use `$("#MyEdit").html(sku);` Why do you wanna mix two APIs? — Praveen Kumar Purushothaman, Jun 20 '18 at 11:07
You shouldn't have multiple elements with the same (supposedly unique) `id`. How is the browser supposed to know which one you're referring to? — , Jun 20 '18 at 11:08
An ID has to be **unique** on the whole page. Take a look at `getElement` (singular). It returns only one element because it's supposed to find only one ID. — CodeF0x, Jun 20 '18 at 11:09
Tables shouldn't be used for layout, although forms can be tabular, the way you have done it, it should not be in a table — Pete, Jun 20 '18 at 11:11
@Pete "Tables shouldn't be used for layout" - this brings back (bad) memories :D — Vucko, Jun 20 '18 at 11:13
hahaha, good to see another js question with every answer downvoted, well done — Pete, Jun 20 '18 at 11:14
@Pete Yeah, but those answers are correct. If you need to select multiple elements, you should not select by ID but rather using a class name. — feeela, Jun 20 '18 at 11:20
@feeela have you heard of sarcasm? I am conveying my contempt at the js users as it only seems to be that tag where I regularly see correct answers being downvoted - the most toxic community on this site — Pete, Jun 20 '18 at 11:51
@Pete Ah, yeah. Yes I heard of sarcasm, but is it herd to get the tone right in written communication ;-) — feeela, Jun 20 '18 at 12:37

fabspro · Answer 1 · 2018-06-20T11:11:47.417

0

The answer is, you are not searching by class. You are searching by id. You should use document.querySelector('.myedit') to get all of the myedit elements. And to set the innerHTML you will need to loop through all of the results and set the content for each one of them. Something like:

for (var result in document.querySelectorAll('.myedit'))
{
result.innerHTML = sku;
}

Good luck! :)

edited Jun 20 '18 at 11:11

answered Jun 20 '18 at 11:09

fabspro

1,639
19
29

That is not how `querySelector()` works – charlietfl Jun 20 '18 at 11:10
Yeah, I said "something like" if you read the answer. – fabspro Jun 20 '18 at 11:11
I did read the answer and the code used would have thrown error – charlietfl Jun 20 '18 at 11:13
Nope, it wouldn't have. (hint: psuedocode does not have errors, you nitwit @charlietfl) – fabspro Jun 20 '18 at 11:13

NoOorZ24 · Answer 2 · 2018-06-20T11:16:36.950

You can assign id only to 1 element. What you need is to find them by class. document.querySelectorAll('.myedit') is whay you need. https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Note: that this returns multiple elements so you have to loop thru them

Update: I didn't notice that you are using jQuery as you are easiest would be:

$('.myedit').each(function(){
    $(this).html(sku)
})

score -1 · Answer 3 · answered Jun 20 '18 at 11:10

-1

ID's must be unique. You can try document.getElementsByClass(). This will get you list of elements with that class.

answered Jun 20 '18 at 11:10

Kavitha Madhavaraj

562
1
6
23

Javascript document.getElementById multiple times on page

3 Answers3