Javascript change innerHTML of all span elements [duplicate]

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
– MinusFour, Commented Dec 18, 2015 at 15:49
I failed to consider the case that JSFiddle settings were the issue. Thank you for the redirect guys :) — Lance Upton
– Lance Upton, Commented Dec 18, 2015 at 16:36

Bas Slagter · Accepted Answer · 2015-12-18 15:53:28Z

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, 2015 at 15:53

answered Dec 18, 2015 at 15:49

Bas Slagter

9,9479 gold badges51 silver badges81 bronze badges

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

6 Comments

Bas Slagter Over a year ago

Ah, did not notice...you are right

MinusFour Over a year ago

@Teemu, it can also be defined in the element object.

Bas Slagter Over a year ago

@MinusFour yes, but that is kind of offtopic right? And I think it's ugly :)

Teemu Over a year ago

@MinusFour You're right, though setting custom properties to HTML elements is considered as bad practice... Well, usually inline handlers are too ; ).

Jeremy Over a year ago

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 jsfiddle.net/jrj0y5kd/9

|

webcodecs · Accepted Answer · 2015-12-18 15:48:59Z

-1

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

answered Dec 18, 2015 at 15:48

webcodecs

2172 silver badges9 bronze badges

Collectives™ on Stack Overflow

Javascript change innerHTML of all span elements [duplicate]

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related