Get HTML element value and process it with JS returning result into HTML

Question

I want to make a simple HTML web page with simple formula. I have tried 2 ways - one with only HTML and it worked - and another with HTML + JS or so called DOM. The second one didn't work and I don't know why. I am sure that there are multiple problems.

Final result is a page where you enter a number (Fahrenheit for example) and get Celsius below instantly. I cant get it to work at all.

JS keeps getting string as a value instead of a number and I don't understand why. All examples are about text but none with numbers.

.value doesn't help. <input> doesn't work. NaN and undefined errors 24/7.

var inData = document.getElementById("input");
var ouData = document.getElementById("output");
inData.onblur = update;
inData.onkeydown = update;
inData.onkeyup = update;
inData.onkeypress = update;

function update() {
  var ouData = (5 / 9) * (inData - 32);
  document.getElementById("output").innerHTML = ouData.value;;
}

<input id="input" type="number">
<hr> Result=
<p id="output"></p>

simplified as much as possible

Want to understand whats the problem. New to JS - one day of experience.

`inData` is an element. You are probably looking for `inData.value` (same applies to `ouData`) — Jonas Wilms, Apr 29 '19 at 16:09
yeah i dont really care about element (aka html box), i understand that. Sadly that doesnt help. — Gerpstarg, Apr 29 '19 at 16:21

Buh13246 · Answer 1 · 2019-04-29T16:18:17.877

0

document.getElementById('input').value should work. Please try this in a Live Console in Browser. Maybe you need to Cast into a Float. parseFloat(inData.value)

var inData = document.getElementById("input");
var ouData = document.getElementById("output");
inData.onblur = update;
inData.onkeydown = update;
inData.onkeyup = update;
inData.onkeypress = update;

function update() {
  var newValue = (5 / 9) * (parseFloat(inData.value) - 32);
  ouData.innerHTML = newValue;
}

<input id="input" type="number">
<hr> Result=
<p id="output"></p>

edited Apr 29 '19 at 16:18

answered Apr 29 '19 at 16:12

Buh13246

173
7

That is not me. Your solution works and i will upvote you. Thank you :D – Gerpstarg Apr 29 '19 at 16:27
@Gerpstarg by the way. Mabe you dont want a default step="1" than you can only insert ints... use instead this `` Like in this Question: https://stackoverflow.com/questions/19011861/is-there-a-float-input-type-in-html5 – Buh13246 Apr 29 '19 at 16:31
@Gerpstarg If you think my answer solve your question. Please accept the answer. But i think Renès answer is better than mine – Buh13246 Apr 29 '19 at 16:39

Dylan · Accepted Answer · 2019-04-29T16:20:54.040

0

You need to get the value of the inData element, but you do not need the .value of the ouData inside the function:

var inData = document.getElementById("input");
inData.onblur = update;
inData.onkeydown = update;
inData.onkeyup = update;
inData.onkeypress = update;

function update() {
    var ouData = (5/9)*(inData.value-32);

    document.getElementById("output").innerHTML = ouData;
    ;
}

Codepen example: https://codepen.io/anon/pen/vMMZwj

edited Apr 29 '19 at 16:20

answered Apr 29 '19 at 16:12

Dylan

1,681
11
16

Shadowing is bad, as it confuses beginners. – Jonas Wilms Apr 29 '19 at 16:16
@JonasWilms I am re-using the code that was given. Re-factoring code unrelated to the question would be more confusing. – Dylan Apr 29 '19 at 16:19
Your code really works, thank you sir! I will upvote. – Gerpstarg Apr 29 '19 at 16:32
It's not right to get a downvote for a working answer. I upvote it. – Buh13246 Apr 29 '19 at 16:43

René Baudisch · Answer 3 · 2019-04-29T16:22:32.437

OK, let's see, when using

document.getElementById("input")

you only get a reference to the DOM element (please don't mix up DOM and JS, you access the DOM within JS it's not the same).

Inside your update function you now calculate with a reference. So to say you want to remove 32 from a box/container... So you will want to use inData.value instead.

But also then value can be an empty string when you have not set it before or empty the field and you also have to remove .value from ouData So this would work:

function update() {
    if (!inData.value) {
        inData.value = 0;
    }
    var ouData = (5/9)*(inData.value-32);
    document.getElementById("output").innerHTML = ouData;
    ;
}

or even shorter using conditional operators

function update() {
    if (!inData.value) {
        inData.value = 0;
    }
    var ouData = (5/9)*((inData.value ? inData.value : 0 )-32));
    document.getElementById("output").innerHTML = ouData;
    ;
}

Why here removiong .value? You define ouData in a different scope (inside a function) so it is not the same like in line 2, even the name is the same. That way you save the result of the calc in ouData, so there will be no property "value" to ouData.

    var inData = document.getElementById("input");
    var ouData = document.getElementById("output");
    inData.onblur = update;
    inData.onkeydown = update;
    inData.onkeyup = update;
    inData.onkeypress = update;

    function update() {
      var ouData = (5 / 9) * ((inData.value ? inData.value : 0) - 32);
      document.getElementById("output").innerHTML = ouData;
    }

    <input id="input" type="number">
    <hr> Result=
    <p id="output"></p>

Your solution uses some new tricks that are out of my competence at the moment :D Anyway thanks for help - you really saved me. — Gerpstarg, Apr 29 '19 at 16:43

Get HTML element value and process it with JS returning result into HTML

3 Answers3