根据Name属性的值更改背景颜色

Question

I've been experimenting with a Codepen and I'm looking to change the background color of a span subject to the value of the HTML's Name attribute.

The following codepen demonstrates where I am so far:

<div class="card-body">
  <span id="community" class="card-community-tag" Name="test">Community 1</span>
  <span class="card-community-tag">Community 2</span>
</div>

document.load(function changeBackground() {  
    var communityName = document.getElementById("community");  
    if (communityName.getAttribute("Name") == "test") {
        communityName.style.backgroundColor = "red";
    }
});

What am I doing wrong?

My end goal is for the JS to check the name attribute of a given <span> to determine what the background-color of that <span> should be.

Answer 1

Use document.addEventListener('DOMContentLoaded', function() {}) ( MDN ) instead of document.load() :

 document.addEventListener('DOMContentLoaded', function() { var communityName = document.getElementById("community"); if (communityName.getAttribute("Name") == "test") { communityName.style.backgroundColor = "red"; } }); 

 <div class="card-body"> <span id="community" class="card-community-tag" Name="test">Community 1</span> <span class="card-community-tag">Community 2</span> </div> 

Answer 2

Your problem is this line

document.load(function changeBackground() {

load or onload are no longer supported by browsers now change it handle DOMContentLoaded event (updated pen )

document.addEventListener("DOMContentLoaded", function () {

Answer 3

Try using this for your document load listener:

document.addEventListener("DOMContentLoaded", function(event) {
  // Do the business
});

so:

document.addEventListener("DOMContentLoaded", function(event) {  
  var communityName = document.getElementById("community");  
  if (communityName.getAttribute("Name") == "test") {
    communityName.style.backgroundColor = "red";
  }
});

Answer 4

You try to call load , but you're looking for onload .

function changeBackground() {  
  var communityName = document.getElementById("community");  
  if (communityName.getAttribute("Name") == "test") {
    communityName.style.backgroundColor = "red";
  }
}

document.onload = changeBackground();

Note: Better than change CSS directly in JS is change CSS classname.

communityName.className += ' red';