JavaScript: setAttribute function is failing

Question

I have slightly modified the code here https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_doc_getelementsbyname_loop

From:

<!DOCTYPE html>
<html>
<body>

Cats:  <input name="animal" type="checkbox" value="Cats">
Dogs:  <input name="animal" type="checkbox" value="Dogs">

<p>Click the button to check all checkboxes that have a name attribute with the value "animal".</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
    var x = document.getElementsByName("animal");
    var i;
    for (i = 0; i < x.length; i++) {
        if (x[i].type == "checkbox") {
            x[i].checked = true;
        }
    }
}
</script>

</body>
</html>

To: i.e. I want to change the value of value's attribute.

  for (i = 0; i < x.length; i++) {
    if (x[i].type == "checkbox") {
        x[i].setAttribute("value", "camels");
    }
}

It didn't change nothing, but What wrong am I doing?

Edit: Requirement is to change the property in DOM not HTML.

You can shorten it to x[i].value = "camels";. BTW, setAttribute should work too, did you change anything else by any chance? — ibrahim mahrir
– ibrahim mahrir, Commented Nov 28, 2018 at 21:36

Pabs123 · Accepted Answer · 2018-11-28 21:50:07Z

4

Looks to be doing what is expected. The value attribute changes to camels for every single checkbox.

If what you're trying to do is change the TEXT beside the checkbox, you'll need to wrap it in its own element (likely a p) and change the text to be camel. Changing the value will only change the actual data value which that checkbox corresponds to.

edited Nov 28, 2018 at 21:50

answered Nov 28, 2018 at 21:33

Pabs123

3,43315 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

paul Over a year ago

When I do webElement.getAtrribute("value"); it will be some value. Same value I want to change using Javascriptexecutor, but what it is doing is change value in HTML. I have added picture for better understanding.

Blazes · Accepted Answer · 2018-11-28 21:37:53Z

2

I think it is doing what you want, you just can't see it. You are changing the value of the input, not the actual text "Dogs:", so what you end up with is:

Cats:  <input name="animal" type="checkbox" value="camels">
Dogs:  <input name="animal" type="checkbox" value="camels">

answered Nov 28, 2018 at 21:37

Blazes

4,7792 gold badges25 silver badges29 bronze badges

Collectives™ on Stack Overflow

JavaScript: setAttribute function is failing

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related