CODEWITHSUNDEEP
javascripthtml
johnc31
johnc31

Reputation: 67

Changing value of a cell with JavaScript

I am having a problem changing the value of a cell in a HTML table. I am just messing around with JavaScript because I have never used it. Here is my code: 

<!DOCTYPE html>
<html>

<head>
  <script>
    var name = "Requiem";
    var health = 100;
    var strength = 1;
    var agility = 1;
    var intelligence = 1;
    var gold = 50;
    var Class = "Warrior";

    document.getElementsByName('Name').innerHTML = name;
  </script>
</head>

<body>
  <table id="myTable" border="1">
    <tr>
      <td>Name</td>
      <td>Health</td>
      <td>Strength</td>
      <td>Agility</td>
      <td>Intelligence</td>
      <td>Gold</td>
      <td>Class</td>
    </tr>
    <tr>
      <td name="Name"></td>
      <td name="Health"></td>
      <td name="Strength"></td>
      <td name="Agility"></td>
      <td name="Intelligence"></td>
      <td name="Gold"></td>
      <td name="Class"></td>
    </tr>
  </table>
</body>

</html>

Upvotes: 2

Views: 64

Answers (2)

AstroCB
AstroCB

Reputation: 12367

document.getElementsByName() returns a NodeList (notice that it's Elements rather than Element, so you have to specify which element you'd like to modify.

In this case, there's only one element, so you only need to access the first in the list:

document.getElementsByName("Name")[0].innerHTML = name;


var name = "Requiem";
var health = 100;
var strength = 1;
var agility = 1;
var intelligence = 1;
var gold = 50;
var Class = "Warrior";

document.getElementsByName('Name')[0].innerHTML = name;
<!DOCTYPE html>
<html>

<body>
  <table id="myTable" border="1">
    <tr>
      <td>Name</td>
      <td>Health</td>
      <td>Strength</td>
      <td>Agility</td>
      <td>Intelligence</td>
      <td>Gold</td>
      <td>Class</td>
    </tr>
    <tr>
      <td name="Name"></td>
      <td name="Health"></td>
      <td name="Strength"></td>
      <td name="Agility"></td>
      <td name="Intelligence"></td>
      <td name="Gold"></td>
      <td name="Class"></td>
    </tr>
  </table>
</body>


</html>

Upvotes: 1

Alexander O&#39;Mara
Alexander O&#39;Mara

Reputation: 60507

Your problem is two fold.

  1. Your script tag is in the head and runs immediately. Only tags that have been processed before the script will be available to manipulate. You can fix this by moving your script tag below the <td name="Name"></td> tag or delaying the code with something like jQuery's document ready (requires jQuery).

  2. document.getElementsByName returns a NodeList containing all the elements with the specified name. To manipulate the first element with this name, you can use document.getElementsByName("Name")[0].

Example:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <table id="myTable" border="1">
        <tr>
            <td>Name</td>
            <td>Health</td>
            <td>Strength</td>
            <td>Agility</td>
            <td>Intelligence</td>
            <td>Gold</td>
            <td>Class</td>
        </tr>
        <tr>
            <td name="Name"></td>
            <td name="Health"></td>
            <td name="Strength"></td>
            <td name="Agility"></td>
            <td name="Intelligence"></td>
            <td name="Gold"></td>
            <td name="Class"></td>
        </tr>
    </table>
    <script>
        var name = "Requiem";
        var health = 100;
        var strength = 1;
        var agility = 1;
        var intelligence = 1;
        var gold = 50;
        var Class = "Warrior";

        document.getElementsByName('Name')[0].innerHTML = name;
    </script>
</body>
</html>

Upvotes: 2

Related Questions