How to manipulate value taken from form

Question

I am taking value from the user inside the form and doing calculations inside new variable by using those values which user input inside the form but I cannot figure out why my code is not working.

function click() {
  var l = document.getElementById('l');
  var b = document.getElementById('b');
  var a = document.getElementById('area');
  var area = l.value * b.value;
  a.innerHTML = "The ans is " + area;
}

<form>
  <label>Length of the triangle: </label>
  <br>
  <input id="l" type="text" placeholder="Length">
  <br>
  <label>Base of the triangle</label>
  <br>
  <input id="b" type="text" placeholder="Base">
  <br>
</form>
<p id=area></p>
<button type="button" onclick="click()">Click:</button>

I think i have done everything fine then why on chrome it doesnt show the correct ans.Please help on thsi one

CertainPerformance · Answer 1 · 2020-03-21T04:21:49.630

The problem is that inline handlers have a very peculiar scope chain. They're surrounded inside two withs: one for the document, and one for the element on which the inline handler exists. For example, with

<button id="button" onclick="<<CODE HERE>>">

When clicked, the effect will be similar to as if the following was executed:

with (document) {
  with (button) {
    <<CODE HERE>>
  }
}

When you reference click inside one of these handlers, it will first try to find a click property on the element, and it finds one: it refers to HTMLButtonElement.prototype.click:

<form>
  <label>Length of the triangle: </label><br>
  <input id="l" type="text" placeholder="Length"><br>
  <label>Base of the triangle</label><br>
  <input id="b" type="text" placeholder="Base"><br>
</form>
<p id=area></p>
<button
  id="button"
  onclick="console.log(click === button.click, click === HTMLButtonElement.prototype.click)"
>Click:</button>

As a result, clicking the button results in HTMLButton.prototype.click being called on that button, which, here, does nothing, which is why you're not seeing any results, and not even an error message.

Either use a different variable name:

function handleClick() {
  var l = document.getElementById('l');
  var b = document.getElementById('b');
  var a = document.getElementById('area');
  var area = l.value * b.value;
  a.innerHTML = "The ans is " + area;
}

<form>
  <label>Length of the triangle: </label><br>
  <input id="l" type="text" placeholder="Length"><br>
  <label>Base of the triangle</label><br>
  <input id="b" type="text" placeholder="Base"><br>
</form>
<p id=area></p>
<button onclick="handleClick()"
>Click:</button>

Or, even better, avoid inline handlers entirely, since they behave so weirdly - attach the listener properly using Javascript instead. Using addEventListener also lets you avoid global variable pollution, which is inelegant and can lead to bugs and messy code.

document.querySelector('button').addEventListener('click', () => {
  var l = document.getElementById('l');
  var b = document.getElementById('b');
  var a = document.getElementById('area');
  var area = l.value * b.value;
  a.textContent = "The ans is " + area;
});

<form>
  <label>Length of the triangle: </label><br>
  <input id="l" type="text" placeholder="Length"><br>
  <label>Base of the triangle</label><br>
  <input id="b" type="text" placeholder="Base"><br>
</form>
<p id=area></p>
<button>Click:</button>

actually i was using addevent listner for a long time but wanna do it by onclick daymn it was such a small mistake i just have to change the name of the function. Thanks for the solution tho — Manshu Chatrath, Mar 21 '20 at 04:19
It would be a great idea to get into the habit of strongly preferring to *avoid* inline handlers. They have way too many problems. — CertainPerformance, Mar 21 '20 at 04:20
When an answer solves your problem, you may consider marking it as Accepted (check the checkbox on the left) to indicate that the issue is resolved :) — CertainPerformance, Mar 21 '20 at 05:48

How to manipulate value taken from form

1 Answers1