Javascript - How to use variable when writing table

Question

I'm trying to print the value of a variable in the first column of my table, but when I run the method, I get the name of the variable instead

I have the following code

function writeTable() {
  var table;
  var uInput = document.test.input.value;
  table = "<table><tr><th colspan=3>Table Header</th></tr>";
  table += "<tr><th>Column1</th><th>column2</th><th>column3</th></tr>";
  table += '<tr><td>uInput</td><td>Value2</td><td>value3</td></tr>';
  document.write(table);
}

<form name="test">
  <input type="text" name="input">
</form>
<input type="submit" name="submit" value="Write Table" onclick="writeTable()">

Also avoid the legacy DOM notation, document.test.input.value;. Modernize with something like var uInput = document.querySelector('input[name="input"]'); — j08691
– j08691, Commented Aug 15, 2017 at 17:17

Dan Mason · Accepted Answer · 2017-10-25 18:49:12Z

5

You need to change this line:

table += '<tr><td>uInput</td><td>Value2</td><td>value3</td></tr>';

To use template literal:

table += `<tr><td>${uInput}</td><td>Value2</td><td>value3</td></tr>`;

Or standard concatenation

table += '<tr><td>' + uInput + '</td><td>Value2</td><td>value3</td></tr>';

edited Oct 25, 2017 at 18:49

answered Aug 15, 2017 at 17:16

Dan Mason

2,3371 gold badge18 silver badges38 bronze badges

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

1 Comment

Rick D Over a year ago

Standard concat, that's what I was looking for. Thanks!

Mouser · Accepted Answer · 2017-08-15 17:16:48Z

0

You need to concatenate the string:

table+= '<tr><td>'+uInput+'</td><td>Value2</td><td>value3</td></tr>';

Remember that everything between single or double quotes is interpreted as a string. However your uInput is a variable. To make sure JavaScript get's the variable you need to concatenate. That means pasting the string parts and the variable together using the +. Purgatory's answer has a nice ecmascript 6 solution too.

answered Aug 15, 2017 at 17:16

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

Comments

Jahangeer Shams · Accepted Answer · 2017-08-15 17:39:43Z

0

In print statement, you have to concatenate variable with "+" sign.
Your function 2nd last row looks like:

table+= '<tr><td>'+ uInput + '</td><td>Value2</td><td>value3</td></tr>';

edited Aug 15, 2017 at 17:39

answered Aug 15, 2017 at 17:25

Jahangeer Shams

365 bronze badges

1 Comment

j08691 Over a year ago

Yes, four other people already stated this. What does your answer add that theirs doesn't?

setCodesToFire · Accepted Answer · 2017-08-15 18:04:30Z

0

use

table+= '<tr><td>' + uInput + '</td><td>Value2</td><td>value3</td></tr>';

to concatenate your string.As well as for the standards ,use

uInput = document.getElementsByName('input').value

in your javascript

edited Aug 15, 2017 at 18:04

answered Aug 15, 2017 at 17:20

setCodesToFire

399 bronze badges

4 Comments

j08691 Over a year ago

There is no getElementByName

setCodesToFire Over a year ago

developer.mozilla.org/en-US/docs/Web/API/Document/…

j08691 Over a year ago

You made my point. It's getElementsByName, not getElementByName

NewToJS Over a year ago

And using getElementsByName() would return a collection so you would also have to iterate through them which you don't explain or give an example of making your answer not very useful / incomplete.

Collectives™ on Stack Overflow

Javascript - How to use variable when writing table

4 Answers 4

1 Comment

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related