How to target elements in li with javascript-CodePudding

Here is a code of javascript for example i want to change the text in the span that is nested in li. How do i use the DOM to target this elements ?

var body = document.getElementsByTagName('body')[0]
body.style.fontFamily = "Arial";
var name = document.getElementsById('name');
var index = document.getElementsById('index');
var hometown = document.getElementsById('hometown');
name.innerHTML = "NAME";
index.innerHTML = "INDEX";
hometown.innerHTML = "HOMETOWN";

<h1>About Me</h1>
<ul>
  <li>Name: <span id="name"></span>
    <li>Index: <span id="index"></span>
      <li>Hometown: <span id="hometown"></span>
</ul>

CodePudding user response：

Typo: getElementById is singular - it is getElementById and not getElementsById
Also don't have a var with the same name as an ID in the page – it hides the var
Also please close the <li> for formatting reasons

var body = document.getElementsByTagName('body')[0]
body.style.fontFamily = "Arial";
var nameSpan = document.getElementById('name'); // either change the var or the ID - I suggest the ID since name is used in several places like window.name etc
var index = document.getElementById('index');
var hometown = document.getElementById('hometown');
nameSpan.innerHTML = "NAME";
index.innerHTML = "INDEX";
hometown.innerHTML = "HOMETOWN";

<h1>About Me</h1>
<ul>
  <li>Name: <span id="name"></span></li>
  <li>Index: <span id="index"></span></li>
  <li>Hometown: <span id="hometown"></span></li>
</ul>

CodePudding user response：

you have typos in the script as getElementById not getElementsById

Also HTML Have some tag issue

Try this

<ul>
  <li>Name: <span id="name"></span></li>
  <li>Index: <span id="index"></span></li>
  <li>Hometown: <span id="hometown"></span></li>
</ul>



    var body = document.getElementsByTagName('body')[0]
    body.style.fontFamily = "Arial";
    var name = document.getElementById('name');
    var index = document.getElementById('index');
    var hometown = document.getElementById('hometown');
    name.innerHTML = "NAME";
    index.innerHTML = "INDEX";
    hometown.innerHTML = "HOMETOWN";

CodePudding user response：

Firsts of all you have a typo in getElementsById, it should be getElementById. And second, you should = the HTML not just =, cause it deletes the text in your HTML and replace it with the value you set in JavaScript. And the last thing, it's better to give an id for <li>, it's more sufficient than making span, I think. This is fixed HTML:

<!DOCTYPE html>
<html>
    <head>

    </head>

    <body>
        <h1>About Me</h1>
        <ul>
            <li id="name">Name: 
            <li id="index">Index: 
            <li id="hometown">Hometown: 
        </ul>
        <script src="index.js"></script>
    </body>
</html>

And this is fixed JS:

document.getElementById("name").innerHTML  = "anything";
document.getElementById("index").innerHTML  = "anything";
document.getElementById("hometown").innerHTML  = "anything";

heppy coding :)