Concatenating javascript and html

Question

I'd like to set the variable player to the value "Leno Morales", which is also a value in my HTML table.

How do I concatenate the table value to my javascript?

Also, if I would like to change the player value based on the table value, how would I go about doing this?

At the moment, I have:

<tr onmouseover="this.style.backgroundColor='#ffff66';" 
    onmouseout="this.style.backgroundColor='#d4e3e5';" 
    onclick="location.href='#individualwellness'">
    <td>
        <script>
            var player = Leno Morales
        </script>
    </td>
    <td>
        RA
    </td>
    <td>
        Injured
    </td>
</tr>

imkrisna · Accepted Answer · 2014-04-16 04:44:30Z

1

<td id="player">
    <script>
            var player = "Leno Morales";
            document.getElementById("player").innerHTML = player;
    </script> 
</td>

But, The best thing is to put the script in the end of HTML to make sure the table is already rendered by browser.

answered Apr 16, 2014 at 4:44

imkrisna

8535 silver badges7 bronze badges

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

2 Comments

user3538570 Over a year ago

thanks! but if the value of player is different for each row of the data table, how should I go about coding the rest of the table?

imkrisna Over a year ago

answer from chandra is good to try, but make sure that you count correct number of <td> tags. Another workaround is the ID for each <td> should referring to the row number such as player_0, player_1 and so on so you can use document.getElementById("player_" + row)

Chandra Prakash · Accepted Answer · 2014-04-16 04:50:07Z

0

Add an id to the <td> tag where player name is to be inserted;

<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';" onclick="location.href='#individualwellness'">
  <td id="playerValue">

  </td>
   <td>
     RA
  </td>
  <td>
     Injured
   </td>

Then you can set the value in tag by:

<script>
     var player = Leno Morales;
     document.getElementById("playerValue") = player;
</script>

Or you can add value by counting <td> tag:

<script>
         var player = Leno Morales;
         document.getElementByTagNames('td')[0] = player;
</script>

answered Apr 16, 2014 at 4:50

Chandra Prakash

7914 gold badges13 silver badges23 bronze badges

Comments

user3539722 · Accepted Answer · 2014-04-16 06:07:48Z

0

Just add an ID for the content form where you want to fetch the value like

<td id="playerValue">
    Leno Morales
</td>

Then to get the value inside a variable use the bellow code

var playerName=document.getElementById("playerValue").innerHTML;

Synopsis

We use the first ID attribute in the TD tag for making it unique for easily locating. Then we use innerHTML function to bring the inner HTML text (i.e. Leno Morales) and then in the next code we use the value to place in a global variable (i.e. playerName). The variable have be previously declared to use it as globally or for locally it can the declared in the function as here.

answered Apr 16, 2014 at 6:07

user3539722

604 bronze badges

Collectives™ on Stack Overflow

Concatenating javascript and html

3 Answers 3

2 Comments

Comments

Synopsis

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Synopsis

Comments

Your Answer

Sign up or log in

Post as a guest

Related