CODEWITHSUNDEEP
javascripthtmlcssdom
itmemilan
itmemilan

Reputation: 361

How to target elements in li with javascript

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>
    <li>Index: <span id="index"></span></li>
      <li>Hometown: <span id="hometown"></span></li>
</ul>

Upvotes: 0

Views: 845

Answers (3)

m.moharrami
m.moharrami

Reputation: 73

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 te fixed HTML and JS:

document.getElementById("name").innerHTML += "anything";
document.getElementById("index").innerHTML += "anything";
document.getElementById("hometown").innerHTML += "anything";
<h1>About Me</h1>
<ul>
  <li id="name">Name:
    <li id="index">Index:
      <li id="hometown">Hometown:
</ul>

Upvotes: 1

Anis
Anis

Reputation: 1220

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";

Upvotes: 0

mplungjan
mplungjan

Reputation: 177965

  • 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>

Upvotes: 1

Related Questions