using Javascript to calculate and input into html

Question

The attached screenshot is my output. What I am trying to achieve is when I click AddWood, there will be 3 textbox generated (which is fine). the 3 textbox represent name, length and width. Once I hit calculate there should be a display below showing my the area, which is not working. Can anyone help to point out where my mistake is?

function addText() {
  var div1 = document.getElementById("div2");
  div1.innerHTML = "<input type='text' id=Wname/><br> <input type='text' id=length/><br>  <input type='text' id=width/>";
}

function myFunction() {
  var length = document.getElementById("length").value;
  var width = document.getElementById("width").value;
  var area = length * width;
  document.getElementById("Result").innerHTML = area;
}

<div id="div2"></div>
<input type="button" id="btnok" onclick="addText();" value="Add Wood"/>
<br />
<p><button onclick="myFunction()">Calculate</button>
<p id="Result"></p>

brk · Accepted Answer · 2018-04-30 04:12:27Z

3

The id need to be inside the quotes. Also input is a self closing tag

function addText() {
  var div1 = document.getElementById("div2");
  div1.innerHTML = "<input type='text' id='Wname'/><br> <input type='text' id='length'><br>  <input type='text' id='width'>";
}

function myFunction() {
  var length = document.getElementById("length").value;
  var width = document.getElementById("width").value;
  var area = length * width;
  document.getElementById("Result").innerHTML = area;
}

<div id="div2"></div>

<input type="button" id="btnok" onclick="addText();" value="Add Wood" />
<br />
<p><button onclick="myFunction()">Calculate</button>
  <p id="Result"></p>

answered Apr 30, 2018 at 4:12

brk

50.3k10 gold badges59 silver badges85 bronze badges

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

1 Comment

NewToJS Over a year ago

Great answer but I would like to mention parseInt() should be used on those values to avoid NAN result. Still +1

Daniel Brose · Accepted Answer · 2018-04-30 04:20:14Z

This line looks wrong to me, no inner quote marks around the id values

div1.innerHTML="<input type='text' id=Wname/><br> <input type='text' id=length/><br>  <input type='text' id=width/>";

Chuck it into a snippet, seems to do the trick.

function addText() {
  var div1 = document.getElementById("div2");
  div1.innerHTML = "<input type='text' id='Wname' /><br> <input type='text' id='length' /><br>  <input type='text' id='width' />";
}

function myFunction() {
  var length = document.getElementById("length").value;
  var width = document.getElementById("width").value;
  var area = length * width;
  document.getElementById("Result").innerHTML = area;
}

<div id="div2"></div>
<input type="button" id="btnok" onclick="addText();" value="Add Wood"/>
<br />
<p><button onclick="myFunction()">Calculate</button>
<p id="Result"></p>

Also...

It might be worth giving a look at https://developers.google.com/web/tools/chrome-devtools/ and debugging javascript (similar tools for all major browsers, just google).

Placing a breakpoint or even just some console.log(blah), console.info(blah) or console.error(blah) calls would be all you need to quickly resolve the vast majority of errors, or at the least provide better framed questions for even better help.

Collectives™ on Stack Overflow

using Javascript to calculate and input into html

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related