Преобразование строки в число в калькуляторе

Я не программист по профессии, поэтому, пожалуйста, не держите мой простой вопрос против меня. Я уверен, что ответ прост, но я не могу понять.Преобразование строки в число в калькуляторе

Я пытаюсь создать калькулятор мульчирования, чтобы надеть сайт моей компании. Мой код, как представляется, принимает вход, но возвращает значение NaN. Очевидно, это преобразование информации в строку, как я ожидал. Я попытался преобразовать его обратно в число, вычитая 0 из моей последней переменной, а также используя parseInt. Кажется, никто не работал. Кто-нибудь захочет объяснить, как решить эту проблему, и почему ваше решение сработало. Я пытаюсь понять, что я сделал не так.

См. Приведенный ниже код.

Спасибо.

<!DOCTYPE html> 
<html> 

<head> 

</head> 

<body> 
<h1>Mulch Calculator</h1> 

<form name="calcInput" id="calcInfoInput"> 

The length of the area you need to cover (in feet). <input type="text" name="length" 
<br></br> 
<br></br> 
The width of the area you need to cover (in feet). <input type="text" `enter code here`name="width" 
<br></br> 
<br></br> 
The depth of coverage you need (in inches). <input type="text" name="depth" 
<br></br> 
<br></br> 
</form> 
<input type="submit" value="Calculate Your Mulch Needs." onclick="processForm()" name="submit"> 
<input type="reset" value="Clear This Form."> 

</form> 
<script type ="text/javascript"> 


function processForm() 
{ 
var allInfo = document.getElementById ("calcInfoInput"); 
var bedLength = allInfo.elements["length"].value; 
var bedWidth = allInfo.elements["width"].value; 
var bedDepthInches = allInfo.elements["depth"].value; 
var squareFeet = bedLength * bedWidth; 
var bedDepth = bedDepthInches/12; 
var cubicFeet = squareFeet * bedDepth; 
var cubicYards = cubicFeet/27; 
//cubicYards = cubicYards-0; 
//cubicYards = parseInt(cubicYards, 10); 
document.write('You will need at least '+ cubicYards +' cubic yards for your project.'); 
} 

</script> 

</body>

источник

2016-03-24 CD Martin

вам нужно спецификации '0 'для значения "пустых" входов. Кроме того, тип = номер обеспечит более удобный UX. – dandavis

Вы можете принуждать свои значения ввода к целым числам либо путем префикса '+' им: '+ allInfo.elements [" length "]. Value', либо с помощью' parseInt (allInfo.elements ["length"]. Value, 10) ; '. – Andy

Спасибо, дандавис и Энди. Я ценю вашу помощь. –

Так что я исправил это!

Ваша проблема оказалась в том, как вы получали данные со входа.

Вы использовали это:

var bedLength = allInfo.elements["length"].value;

Я использовал это:

var bedLength = +allInfo["length"].value;

Поэтому в основном я удалил .elements для каждого места, которое вы используете входные значения.

Я также добавил:

calcscale = (calcscale).toFixed(3);

Какие урезает десятичного место до 3 (так что вы не получите ответа, как 3.111111111111111117 или что-то в этом роде)!

function calculate() { 
 
    var allInfo = document.getElementById("calcInfoInput"); 
 
    var bedLength = +allInfo["length"].value; 
 
    var bedWidth = +allInfo["width"].value; 
 
    var bedDepthInches = +allInfo["depth"].value; 
 
    var squareFeet = bedLength * bedWidth; 
 
    var bedDepth = bedDepthInches/12; 
 
    var cubicFeet = squareFeet * bedDepth; 
 
    var cubicYards = cubicFeet/27; 
 
    //cubicYards = cubicYards-0; 
 
    //cubicYards = parseInt(cubicYards, 10); 
 
    output = (cubicYards).toFixed(3); 
 
    document.getElementById("result").innerHTML = 'You will need at least ' + output + ' cubic yards for your project.'; 
 
}

<body> 
 
    <h1>Mulch Calculator</h1> 
 

 
    <form name="calcInput" id="calcInfoInput"> 
 

 
    The length of the area you need to cover (in feet). 
 
    <input type="text" name="length" /> 
 
    <br> 
 
    <br>The width of the area you need to cover (in feet). 
 
    <input type="text" name="width" /> 
 
    <br> 
 
    <br>The depth of coverage you need (in inches). 
 
    <input type="text" name="depth" /> 
 
    <br> 
 
    <br> 
 
    </form> 
 
    <input type="submit" id="byBtn" value="Calculate You're Mulch Needs." onclick="calculate()" /> 
 
    <input type="reset" value="Clear This Form."> 
 
    <br> 
 
    <br> 
 
    <div id="result"></div> 
 

 
    </form> 
 

 

 
</body>

источник

2016-03-24 18:14:55

Trevor, спасибо за то, что вы потратили на это. Я побежал, и это выглядит великолепно. Вы также исправили одну из следующих проблем, которые я собирался решить, сократив число после десятичной дроби. –

Ну, если это решило вашу проблему, нажмите галочку рядом с моим ответом, чтобы принять ее! Рад, что смог помочь! –

Также ... так, чтобы вы знали .. когда вы помещаете это на свой сайт или где угодно, вам нужно будет поместить javascript обратно в теги .., а также < ! DOCTYPE html>, и теги! –

ваших входных значений следует положить через функцию ParseInt() с 10 в качестве радикса, и вы должны убедиться, что вы не получаете NaN с IsNaN (NUM). Javascript свободно набирается, но это не обязательно означает, что вы можете перебрасывать переменные через типы, не проверяя их.

источник

2016-03-24 18:09:47

'parseInt' - о худшем способе преобразования чисел в JS; медленное выполнение, относительно много кода для ввода/чтения, ему нужны 2 аргумента, он только производит ints, и да, это достаточно рассуждение ... – dandavis

Преобразование строки в число в калькуляторе

ответ

Смежные вопросы