html form text elements, not be parsed correctly into javascript method

I have a simple calculate.js function, that calculates a price and displays it to the user. Here is my function:

function calculatePrice()

//Get selected data
var width = document.getElementById("width");

var heigth = document.getElementById("height");

var elt = document.getElementById("style");
var style = elt.options[elt.selectedIndex].value;

elt = document.getElementById("materials");
var materials = elt.options[elt.selectedIndex].value;

elt = document.getElementById("priority");
priority= elt.options[elt.selectedIndex].value;

//convert data to integers
style = parseInt(style);
materials = parseInt(materials);
priority = parseInt(priority);
width = parseInt(width);
height = parseInt(height);

//calculate total value
var total = 500* (height + width) + (style + materials + priority)

//print value to PicExtPrice
document.getElementById("PicExtPrice").value=total;



Everything was working fine until I started using the width and height variables. The issue is that they are text fields, and I want the user to
input a number directly, instead of selecting an option like the other values.

HTML code for input fields:

<div class="col-lg-6">
Indæst bredden på ønskede malleri
<input name="width" type="text" maxlength="512" id="width" onChange="calculatePrice()"/>
</div>

<div class="col-lg-6">
Indæst længden på ønskede malleri
<input name="heigth" type="text" maxlength="512" id="heigth" onChange="calculatePrice()"/>
</div>


example of an dropdown option:

<div class="col-lg-6">
<SELECT NAME="Stil" onChange="calculatePrice()" id="style">
<OPTION value="0">Hvilken stil skal malleriet være mallet i</OPTION>
<OPTION value="1">Kubisme</OPTION>
<OPTION value="2">Impressionisme</OPTION>
<OPTION value="3">Pop/Ekspressionisme</OPTION>
</SELECT>
</div>


var width = document.getElementById("width");

var width = document.getElementById("width").value;

height

4 Answers
4

You have some incorrect spelling on your inputs Id and in javascript, please check and correct them.

Change your javascript function to this and your problem is should be solved.

function calculatePrice()

//Get selected data
var width = document.getElementById("width").value;

var height = document.getElementById("height").value;

var elt = document.getElementById("style");
var style = elt.options[elt.selectedIndex].value;

elt = document.getElementById("materials");
var materials = elt.options[elt.selectedIndex].value;

elt = document.getElementById("priority");
priority = elt.options[elt.selectedIndex].value;

//convert data to integers
style = parseInt(style);
materials = parseInt(materials);
priority = parseInt(priority);
width_int = width == "" ? 0 : parseInt(width);
height_int = height == "" ? 0 : parseInt(height);

//calculate total value
var total = 500 * (width_int + height_int) + (style + materials + priority);

//print value to PicExtPrice
document.getElementById("PicExtPrice").value = total;




The problem was you should first get value of element. second you should check it if there is no value set it to zero.

"use strict";

If I understand your problem correctly, you are parsing the input object instead of the value of the input.

You can take any value from an object that was retrieved with getElementById using the value getter.

getElementById

var height = document.getElementById("heigth");
height = parseInt(height.value); //instead of height = parseInt(height); parse the value, not the object


Use it on both height and width and you will work with the values that the user has provided.

in the var height line you have a typo. You have typed heigth.

I have derived a test case from your descriptions, and after a bit of tinkering I got it to work as it should (it actually computes a result from the input). However, I have reworked things a bit.

Keyword "Unobtrusive JavaScript": I'm not hard-coding any event handlers into the (X)HTML, but instead I'm waiting for the DOMContentLoaded event to fire and use it to attach event listeners to each individual input field (this way I am guaranteed to have the entire DOM tree set up).

Furthermore I have trapped all values by attempting to convert everything to integers and subsequently also check for the values being a NaN - in the latter case your calculation would produce an invalid result and cause your JavaScript to abort. However, when NaNs are trapped and reset to zeroes, the computation works just fine.

As a last hint, please scan your code and check for any typos - misspelled IDs and the likes that could cause getElementById to return null or undefined.

getElementById

As a final measure you can also unclutter your code by avoiding indexing into the selections, but instead retrieve their values directly (yes, document.getElementById('style').value works!). I successfully checked that in my test case.

document.getElementById('style').value

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.