Unable to make a simple html form and javascript operations work

Question

I have a form with two inputs and a button. When button is clicked, calls a JavaScript function and multiply the two values from inputs. Then show the result in a <p> element and is evaluated in a if else conditional to show a letter depending on value.

function showResult() {
  var input1 = document.getElementById('input1');
  var input2 = document.getElementById('input2');
  var z = input1.value * input2.value;

  var y = document.getElementById('result');
  y.innerHTML = y.innerHTML + z;

  var exp = document.getElementById('expression');
  if (z < 100) {
    expression.innerHTML = "A";
  } else if (100 <= z <= 112.99) {
    expression.innerHTML = "B";
  } else if (113 <= z < 300.0) {
    expression.innerHTML = "C";
  } else {
    expression.innerHTML = "D";
  }
}

<form action="">
  <input type="text" id="input1">
  <input type="text" id="input2">
  <button type="button" onclick="showResult();">Result</button>
</form>
<div>
  <p id="result">The result is:</p>
  <p id="expression"></p>
</div>

Here is the link to fiddle:

fiddle link

What is wrong?

Where does the variable `x` come from? And you're repeatedly appending the result when you do `y.innerHTML = y.innerHTML + z;` — j08691, Sep 26 '15 at 21:39
I think thre is something up with jsfiddle. It works fine in jsbin: https://jsbin.com/pubomaguro/edit?html,js,output — Lim H., Sep 26 '15 at 21:47
I have eddited to change x to z and other bad written words. but still not works. — GmloMalo, Sep 26 '15 at 21:48
possible duplicate of [Simple example doesn't work on JSFiddle](http://stackoverflow.com/questions/5431351/simple-example-doesnt-work-on-jsfiddle) — JJJ, Sep 26 '15 at 21:49
@juhana this answer doesn't resolve my question, or i can understand to resolve it. sorry if duplicate — GmloMalo, Sep 26 '15 at 22:01

enigma · Accepted Answer · 2015-09-26T22:04:00.477

You needed to

Load the js in the head
Directly reference the html element containing the 'result' to change
Use the variable expression throughout, there were several typos
Use the variable z throughout, you used x in several places
Although you can 'chain' comparison operators in some languages (e.g. python), you can't so easily in javascript. You should use if (100 <= z && z <= 112.99)

<form>
    <input type="text" id="input1">
    <input type="text" id="input2">
    <button type="button" onclick="showResult();">Result</button>
</form>
<div>
    <p id="result">The result is: <span id="result_number"></span></p>
    <p id="expression"></p>
</div>

function showResult() {
    var input1 = document.getElementById('input1');
    var input2 = document.getElementById('input2');
    var z = input1.value * input2.value;

    var y = document.getElementById('result_number');
    y.innerHTML = z;

    var expression = document.getElementById('expression');
    if (z < 100) {
        expression.innerHTML = "A";
    } else if (100 <= z && z <= 112.99) {
        expression.innerHTML = "B";
    } else if (113 <= z && z < 300.0) {
        expression.innerHTML = "C";
    } else {
        expression.innerHTML = "D";
    }
}

http://fiddle.jshell.net/nbjzh17w/21/

Ok, thanks! I have edited my code, but now there's another issue with if else condition. Never show C or D letters. When z is > 113 always show B letter — GmloMalo, Sep 26 '15 at 21:59
@GmloMalo sorry, I forgot you couldn't chain comparative operators in javascript, I've updated the link and edited my answer. If this answers your question please consider accepting this answer :) — enigma, Sep 26 '15 at 22:05

Unable to make a simple html form and javascript operations work

1 Answers1