Changing Html content from Javascript with data from JSON

Question

My code is behaving strangely. Indeed, I created my data in a JSON object:

injectJson = {
   "title": "Questions for a champion",
   "rules": [
      {
        "idChrono": "chrono-minute",
        "text": "Top is gone!",
        "tag": [
            {
                "id": "chronometer",
                "text": "countDown"
            }
        ]
     }
  ]
}

Here is my HTML code:

<div id="rules">
   <h3>The game's rules!</h3>
</div>
<div id="begin">
   <a href="#" class="link">Begin</a>
</div>

And here is the Javascript code with which I inject the HTML code:

selectLinkBegin = document.getElementById("begin");
selectLinkBegin.firstElementChild.addEventListener("click", function(injectJson) {
    // Injection code
    selectRules = document.getElementById("rules");;
    selectRules.firstElementChild.innerText = injectJson.rules[0].texte;
});

In my computer,the JSON object and the JavaScript code are in the same .js file. I load my script at the end of the body tag. When I open my .html code in the browser, the console displays:

Uncaught TypeError: Cannot read property '0' of undefined at HTMLAnchorElement.

But when I copy the Javascript code into the console, I get the expected result: h3's text content is updated.

Demo:

injectJson = {
  "title": "Questions for a champion",
  "rules": [{
    "idChrono": "chrono-minute",
    "text": "Top is gone!",
    "tag": [{
        "id": "chronometer",
        "text": "countDown"
      }

    ]
  }]
}


selectLinkBegin = document.getElementById("begin");
selectLinkBegin.firstElementChild.addEventListener("click", function(injectJson) {
  // Injection code
  selectRules = document.getElementById("rules");;
  selectRules.firstElementChild.innerText = injectJson.rules[0].texte;
});

<div id="rules">
  <h3>The game's rules!</h3>
</div>
<div id="begin">
  <a href="#" class="link">Begin</a>
</div>

Can you explain to me what is going on? How to remedy this? I have already emptied my cache but it's still the same.

Need to remove the injectJson parameter from your click handler, and use text property instead of texte. — Robby Cornelissen
– Robby Cornelissen, Commented Dec 12, 2018 at 7:49
@RobbyCornelissen Sorry for thsi typo. I translate my code from French — oklm
– oklm, Commented Dec 12, 2018 at 7:54

cнŝdk · Accepted Answer · 2018-12-12 08:08:54Z

2

Your problem is that the variable injectJSON is being hoisted by the param in your click event handler callback function, so it will be undefined that's why you got the error:

Uncaught TypeError: Cannot read property '0' of undefined at HTMLAnchorElement.

In other words the callback param has the same name as your injectJson variable, so that means your original injectJson variable will be undefined, as it was overridden by this param.

You can check the Variable Hoisting section here for further reading about this.

So what you need to do is to remove the callback param:

selectLinkBegin.firstElementChild.addEventListener("click", function() {
  // Injection code
  selectRules = document.getElementById("rules");;
  selectRules.firstElementChild.innerText = injectJson.rules[0].text;
});

Note:

Make sure to access the right text element instead of texte in injectJson.rules[0].texte.
Make sure to declare your variables with var keyword and avoid using an existing variable name, to avoid such problems.

Demo:

var injectJson = {
  "title": "Questions for a champion",
  "rules": [{
    "idChrono": "chrono-minute",
    "text": "Top is gone!",
    "tag": [{
        "id": "chronometer",
        "text": "countDown"
      }

    ]
  }]
}


selectLinkBegin = document.getElementById("begin");
selectLinkBegin.firstElementChild.addEventListener("click", function() {
  // Injection code
  selectRules = document.getElementById("rules");;
  selectRules.firstElementChild.innerText = injectJson.rules[0].text;
});

<div id="rules">
  <h3>The game's rules!</h3>
</div>
<div id="begin">
  <a href="#" class="link">Begin</a>
</div>

edited Dec 12, 2018 at 8:08

answered Dec 12, 2018 at 7:51

cнŝdk

32.2k7 gold badges62 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

oklm Over a year ago

Got it! Thank you. Can you please explain me what is the callback?

cнŝdk Over a year ago

@FEUJIOMarieTherese the callback is the function you pass to the click event handler in: addEventListener("click",function() {...}).

Collectives™ on Stack Overflow

Changing Html content from Javascript with data from JSON

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related