Very Basic Javascript: Change HTML ID

Question

I can't seem to get this to work at: https://jsfiddle.net/xc6htkn4/4/

<body>
  <p id="one">One</p>
  <p id="two">Two</p>
  <p id="three">Three</p>
  <p id="four">Four</p>
  <p>
    <button onclick="changeId()">Try it</button>
  </p>  
</body>

#one {
  color: red;
}

#two {
  color: blue;
}

function changeId() {
  var el = document.getElementById('one');
  el.id = 'two';
}

What is wrong with the code? It appears to be correct. I am simply trying to change the id on a click event.

Thanks!

Edit: My settings were not appropriately set in jsfiddle

Possible duplicate of How do I change the ID of a HTML element with JavaScript? — Josh C.
– Josh C., Commented Apr 6, 2016 at 21:50
You cannot set the id to 'two' because another element already has that id. — Martin Parenteau
– Martin Parenteau, Commented Apr 6, 2016 at 21:52
While it isn't best practice, it appears to function correctly. I've updated the code to not have dupe id's — PPJN
– PPJN, Commented Apr 6, 2016 at 22:02

Pavel Morshenyuk · Accepted Answer · 2016-04-06 21:56:22Z

1

You code is fine, you just need to change the way jsfiddle loads the js code. Click on "javascript" button and select "Load Type" to be "No wrap - in <body>"

Working example: https://jsfiddle.net/xc6htkn4/5/

answered Apr 6, 2016 at 21:56

Pavel Morshenyuk

11.5k4 gold badges34 silver badges39 bronze badges

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

5 Comments

PPJN Over a year ago

Thanks! Just learning the language. How would this be if I am writing HTML in a real webpage and want to separate my HTML and JS in separate files?

Pavel Morshenyuk Over a year ago

There should be no problems with it. just create a 'script' element within your 'body' or 'head' tag, and link it to your separate js file: '<script src="scripts/you_site.js"></script>'

Hawkeye Over a year ago

You shouldn't use ID's because ID's are supposed to be used for only one element per page. If you want multiple elements to have the same CSS, use class instead.

Paul Fitzgerald Over a year ago

@PavelMorshenyuk what does nowrap do in jsfiddle? What would you use the different options for?

Pavel Morshenyuk Over a year ago

@paul-fitzgerald You can find this information here: doc.jsfiddle.net/basic/… First two options will not add the functions you declare into global scope. Such functions cannot be called from inline html.

Collectives™ on Stack Overflow

Very Basic Javascript: Change HTML ID

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related