Javascript change innerHTML of all span elements

Question

Expected Behavior: On button press, the text contained in each span will change to "UPDATED"

Actual Behavior: When the button is pressed, nothing seems to change.

JSFiddle: https://jsfiddle.net/jrj0y5kd/

CSS

span {
  border: 1px solid black;
  padding: 5px;
}

td {
  padding: 10px;
}

div {
  padding: 10px;
  border: 2px solid black;
  display: inline-block;
  text-align: center;
}

HTML

<div style="container">
  <button value="UPDATE" onClick="update()">UPDATE</button>
  <table>
    <tr>
      <td>
        <span>1A</span>
      </td>
      <td>
        <span>1B</span>
      </td>
      <td>
        <span>1C</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>2A</span>
      </td>
      <td>
        <span>2B</span>
      </td>
      <td>
        <span>2C</span>
      </td>
    </tr>
    <tr>
      <td>
        <span>3A</span>
      </td>
      <td>
        <span>3B</span>
      </td>
      <td>
        <span>3C</span>
      </td>
    </tr>
  </table>
</div>

Javascript

function update() {
  var spans = document.getElementsByTagName('span');
  for (var i = 0; i < spans.length; i++) {
    spans[i].innerHTML = "UPDATED!";
  };
}

You can also add the function to the `window` object. That guarantees it's part of the global scope, even if it's defined inside another function. — MinusFour, Dec 18 '15 at 15:49
I failed to consider the case that JSFiddle settings were the issue. Thank you for the redirect guys :) — Lance Upton, Dec 18 '15 at 16:36

Bas Slagter · Accepted Answer · 2015-12-18T15:53:28.413

4

You have to define the function globally. In jsFiddle you can specify this behaviour using the little settings icon in the right corner of the JavaScript block. See this updated fiddle: https://jsfiddle.net/jrj0y5kd/2/

<html>
    <head>
       <script>
          function update(){
              // your code
          }
       </script>
     </head>
<body>
    <button value="UPDATE" onclick="update()">UPDATE</button>
</body>
</html>

Option under 'load type' needs to set to: no wrap - in head

edited Dec 18 '15 at 15:53

answered Dec 18 '15 at 15:49

Bas Slagter

9,831
7
47
78

Ah, did not notice...you are right – Bas Slagter Dec 18 '15 at 15:52
@Teemu, it can also be defined [in the element object](https://jsfiddle.net/oq96zvpn/). – MinusFour Dec 18 '15 at 15:56
@MinusFour yes, but that is kind of offtopic right? And I think it's ugly :) – Bas Slagter Dec 18 '15 at 15:57
1

@MinusFour You're right, though setting custom properties to HTML elements is considered as bad practice... Well, usually inline handlers are too ; ). – Teemu Dec 18 '15 at 16:00
To resolve the scoping issue, you could also change the way the function is being bound to the onClick handler by using addEventListener() instead of the onClick attribute. See https://jsfiddle.net/jrj0y5kd/9/ – Jeremy Dec 18 '15 at 16:01
My question is a duplicate, but I am accepting this answer also because it works without changing JSFiddle settings. Thanks! – Lance Upton Dec 18 '15 at 16:33

score -1 · Answer 2 · answered Dec 18 '15 at 15:48

update was not defined. I think u defined the function to late or something

<script>
function update() {
  var spans = document.getElementsByTagName('span');
    for (var i = 0; i < spans.length; i++) {
      spans[i].innerHTML = "UPDATED!";
    };
}
</script>

<div style="container">
<button value="UPDATE" onclick="update()">UPDATE</button>
<table><tr><td>
<span>1A</span>
</td><td>
<span>1B</span>
</td><td>
<span>1C</span>
</td></tr><tr><td>
<span>2A</span>
</td><td>
<span>2B</span>
</td><td>
<span>2C</span>
</td></tr><tr><td>
<span>3A</span>
</td><td>
<span>3B</span>
</td><td>
<span>3C</span>
</td></tr></table></div>

That works

Javascript change innerHTML of all span elements

2 Answers2