changing element id using javascript?

add id to element javascript
addeventlistener
innerhtml
setattribute javascript
javascript get element by id value
getelementsbyclassname
document.getelementbyid value
javascript create element with attributes

Trying to change the third item in the list with id "musiclist" by the music genre called Alternative. I have tried the document.getElementbyID however it does not work.

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <script>
      function thirdItem() {
        document.getElementbyId("thirdItem").innerHTML("Alternative");}
        </script> 

    <title> Music Genres </title>
    </head>
    <body>
    <div id="main">
    <h1> Favorite genre of music </h1>
    <p>My favorite type of music include:</p>
    <!--A list of genres of music-->
    <ol id="musiclist">
    <li id="firstItem"> Rock </li>
    <li id="SecondItem"> Hip hop</li>
    <li id="thirdItem"> Country </li>

    </ol>
    </div>
    </body>
    </html>

So you have created a method that when called will change the innerHTML of that element, but there are a few issues

  1. You never call the method
  2. function names are case sensitive so it should be getElementById and not getElementbyId
  3. the innerHTML is a property and not a method so assign a value to it .innerHTML = '...';

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <script>
    function thirdItem() {
      document.getElementById("thirdItem").innerHTML = "Alternative";
    }
    
    document.addEventListener('DOMContentLoaded', function() {
     // this is called when the Document has been parsed and is available so you 
     // can find any element inside it
     
     thirdItem();
    });
  </script>

  <title> Music Genres </title>
</head>

<body>
  <div id="main">
    <h1> Favorite genre of music </h1>
    <p>My favorite type of music include:</p>
    <!--A list of genres of music-->
    <ol id="musiclist">
      <li id="firstItem"> Rock </li>
      <li id="SecondItem"> Hip hop</li>
      <li id="thirdItem"> Country </li>

    </ol>
  </div>
</body>

</html>

JavaScript HTML DOM - Changing HTML, It does work in Firefox (including 2.0.0.20 ). See http://jsbin.com/akili (add /edit to the url to edit): <p id="one">One</p> <a href="#"  What you wanted was to change the id of an element. If you search for element id, you'll land on the Element.id page. And how practical, there's an example: var idStr = elt.id; // Get the id. elt.id = idStr; // Set the id However, this is not going to fix your issues. You see, you guessed wrong when trying to use the getElementById function.

  1. script should be put at the bottom of body
  2. you had better checkout the doc before coding.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">


  <title> Music Genres </title>
</head>

<body>
  <div id="main">
    <h1> Favorite genre of music </h1>
    <p>My favorite type of music include:</p>
    <!--A list of genres of music-->
    <ol id="musiclist">
      <li id="firstItem"> Rock </li>
      <li id="SecondItem"> Hip hop</li>
      <li id="thirdItem"> Country </li>

    </ol>
  </div>
  <script>
    function thirdItem() {
      document.getElementById("thirdItem").innerHTML="Alternative";
    }
    thirdItem()
  </script>
</body>

</html>

How do I change the ID of a HTML element with JavaScript?, Another common case is to use an element's ID as a selector when styling Living Standard, No change from Document Object Model (DOM)  The id property sets or returns the id of an element (the value of an element's id attribute). An ID should be unique within a page, and is often used to return the element using the document.getElementById() method.

  1. Move your script to the end of file or new file
  2. Capitalize the B for getElementById
  3. You can set inner html using =

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">

    <title> Music Genres </title>
    </head>
    <body>
    <div id="main">
    <h1> Favorite genre of music </h1>
    <p>My favorite type of music include:</p>
    <!--A list of genres of music-->
    <ol id="musiclist">
    <li id="firstItem"> Rock </li>
    <li id="SecondItem"> Hip hop</li>
    <li id="thirdItem"> Country </li>

    </ol>
    </div>
    </body>
    </html>
        <script>
    function thirdItem(){document.getElementById("thirdItem").innerHTML = "Alternative"}
        thirdItem();
    </script>

Element.id, In JavaScript you can change elements by using the following syntax: //The HTML <img id="example" src="myPicture.jpg"> //The JavaScript document. Getting Elements by ID, Tag Name, or Class to Code with JavaScript By Chris Minnick, Eva Holland In JavaScript, the getElementBy methods provide easy access to any element or groups of elements in a document without relying on parent/child relationships of nodes.

You need to change your code:

 function thirdItem() {
  document.getElementById("thirdItem").innerHTML = "Alternative";
}

to this:

document.getElementById("thirdItem").innerHTML = "Alternative";

And also you need to move you script block to bottom of the file.

The reason is that, you declare function, but never call it.

JavaScript/Changing elements, Given an HTML document and the task is to change the ID of the element using JavaScript. There are two approaches that are discussed below: Approach 1: We​  Change an element class JavaScript The class name is used as a selector in HTML which helps to give some value to the element attributes. The document.getElementById() method is used to return the element in the document with the “id” attribute and the “className” attribute can be used to change/append the class of the element.

you have to add your javascript code before body ends.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">


<title> Music Genres </title>
</head>
<body>
<div id="main">
<h1> Favorite genre of music </h1>
<p>My favorite type of music include:</p>
<!--A list of genres of music-->
<ol id="musiclist">
<li id="firstItem"> Rock </li>
<li id="SecondItem"> Hip hop</li>
<li id="thirdItem"> Country </li>

</ol>
</div>
<script>
  function thirdItem() {
    document.getElementbyId("thirdItem").innerHTML = "Alternative";}
    </script> 
</body>
</html>

How to change the ID of element using JavaScript ?, DOCTYPE HTML>. < html >. < head >. < title >. Change the element ID. </ title >. < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js" >. Use a method called getElementById to locate the element in the document that has an id attribute set to changeList. As you know, this is the id value of the button. When JavaScript has found the button, use the onclick event handler to tell it to watch for clicks on that button.

How to change the element id using jQuery ?, What if you want to change a specific element inside the or element.id , which return strings, element.style returns an  How to Change the Attributes of an HTML Element Using Javascript. Javascript can be used to change the attribute(s) of a HTML element, such as a paragraph, a header, an image, or a list, or any various HTML elements. For example, by changing the src attribute of an img tag, we can change the image entirely to something else with Javascript.

Dynamic style - manipulating CSS with JavaScript, getElementById("Id"), this is what the following examples use but you can obtain elements in other ways. To change all classes for an element  Use element.style property to set the style attribute of an element. Set the properties either by using bracket notation or dash notation . Example 1: This example changing the color and background-color of heading element.

How to change an element's class with JavaScript?, Output. <div id="demo">Access me by ID</div>. We can be sure we're accessing the correct element by changing the border property to purple  Changing HTML Content. The easiest way to modify the content of an HTML element is by using the innerHTML property.. To change the content of an HTML element, use this syntax:

Comments
  • innerHTML is not a function it's a property so you need : document.getElementbyId("thirdItem").innerHTML = "Alternative"
  • You have to have some type of event that calls your function thirdItem() such as a button click. <button type="button" onclick="thirdItem()"></button>
  • Thanks, this was helpful! So, there must be two script tags; one in the beginning which is the function and one where it is called at the end, before the body and html tags. If a webpage was to be added using script src, the third item changes back to Country? Is it not possible to add a webpage, as well as a function in the first script tag?
  • @sara no need for two script tags. I just wanted to show that you need to call the method and it has to happen after the DOM is ready. You could do it in the same script if it was at the bottom or you could add an event listener for when the document is ready and then call it. I will update the answer
  • (also not sure what you mean with "add a webpage")