CODEWITHSUNDEEP
javascripthtml
user10217645
user10217645

Reputation:

Span text does not change

I am trying to change the text that is inside a span. I've tried using the .innerHTML but it didn't work. Now I tried this:

var user_name = document.getElementById("user_name")
user_name.innerHTML = "New content"
<div class="nav-item dropdown no-arrow"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><span id="user_name" class="d-none d-lg-inline mr-2 text-gray-600 small">Anastasios Papapanagiotou</span></a>
<div class="dropdown-menu shadow dropdown-menu-right animated--grow-in 
role="menu"><a class="dropdown-item" role="presentation" href="#"><i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>&nbsp;Profile</a><a class="dropdown-item" role="presentation" href="#"><i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>&nbsp;Settings</a>                                        
<div class="dropdown-divider"></div><a class="dropdown-item" role="presentation" href="#"><i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>&nbsp;Logout</a></div>
</div>
</a>

And instead of saying Text inside the span I would like to say New Content, but change it using javascript

Upvotes: 0

Views: 746

Answers (3)

King11
King11

Reputation: 1229

Try using textContent instead of innerHtml

jsfiddle: https://jsfiddle.net/uat13fog/

And change your getElementById("user_name") to getElementById('user_name')

Use single quotes instead of double quotes

jsfiddle using your updated code: https://jsfiddle.net/5zw18uv4/

Upvotes: 1

Qui-Gon Jinn
Qui-Gon Jinn

Reputation: 4398

Try this code:

 function myFunction() {
   document.getElementById("user_name").innerHTML = "New content";
}
  
<a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#">
  <span id="user_name" onclick="myFunction()"> Text </span>
</a>

Upvotes: 0

Bojan Tomić
Bojan Tomić

Reputation: 1085

I tried it and seams to work, I don't see any problem.

https://codepen.io/bratorimatori/pen/WNNZBwg?editors=1111

var user_name = document.getElementById("user_name")
user_name.innerHTML = "Changed text"
console.log(user_name);

Upvotes: 0

Related Questions