Не работает if-else

115

24 мая 2019, 00:10

Вот такая вот проблемка. Написал калькулятор расчета цены, но фильтрация данных не проходит. Я думаю, это из-за типа данных. Ведь когда я беру данные из html'a, получаю string, а величины с которыми сравниваю их - number.

<p>Ширина :</p>
<input type="text" id="width">
<p>Высота (см): </p>
<input type="text" id="height">
<button id="btn" onclick="getCalc()">Рассчитать</button>
function getCalc() {
    var width = document.getElementById("width").value;
    var height = document.getElementById("height").value;
    var max_width = 200;
    var min_width = 120;
    var max_height = 240;
    var min_height = 180;
    var result = 0;
    var errors = 0;
    // errors block
    if (width < min_width) {
        errors = errors + 1;
    } else if (height < min_height) {
        errors = errors + 1;
    } else {
        errors = 0;
    }
    if (width > max_width) {
        errors = errors + 1;
    } else if (height > max_height) {
        errors = errors + 1;
    } else {
        errors = 0;
    }
    if (errors <= 0) {
        result = (width * 15) + (height * 10.5);
        document.getElementById("price").innerHTML = result + " rub.";
    } else {
        result = "Error.";
        document.getElementById("price").innerHTML = result;
    }
}

Answer 1

Во-первых, в Вашем коде нет элемента с ID = price. Добавил span.

Во-вторых, для отслеживания пути исполнения кода полезно добавлять console.log(), а для выяснения типа полезно выражение typeof x. Пример:

function getCalc() { 
    var width = document.getElementById("width").value; 
    var height = document.getElementById("height").value; 
    console.log(typeof width); 
 
    var max_width = 200; 
    var min_width = 120; 
    var max_height = 240; 
    var min_height = 180; 
 
    var result = 0; 
    var errors = 0; 
 
    // errors block 
    if (width < min_width) { 
        errors = errors + 1; 
        console.log('W <'); 
 
    } else if (height < min_height) { 
        errors = errors + 1; 
        console.log('H <'); 
 
    } else { 
        errors = 0; 
        console.log('0 <'); 
    } 
 
    if (width > max_width) { 
        errors = errors + 1; 
        console.log('W >'); 
 
    } else if (height > max_height) { 
        errors = errors + 1; 
        console.log('H >'); 
 
    } else { 
        errors = 0; 
        console.log('0 >'); 
    } 
    if (errors <= 0) { 
        result = (width * 15) + (height * 10.5); 
        document.getElementById("price").innerHTML = result + " rub."; 
    } else { 
        result = "Error."; 
        document.getElementById("price").innerHTML = result; 
    } 
}

<p>Ширина :</p> 
<input type="text" id="width"> 
 
<p>Высота (см): </p> 
<input type="text" id="height"> 
 
<p>Цена: <span id="price"></span></p> 
 
<button id="btn" onclick="getCalc()">Рассчитать</button>

В итоге на консоли появляется это:

string
W <
0 >

В итоге становится понятно, что поле .value действительно возвращает строку! И если в той же консоли выполнить строку "12" * 3 то получим 36 – умножение в JavaScript автоматически приводит строку к числу! Решение простое: для перевода строки в число добавьте слева от выражение знак плюса: +document.getElementById("width").value

Стоит отметить, что помимо этого в коде присутствуют очевидные логические неточности с if'ами, не взаимосвязанные проверки почему-то находятся в else, а также присутствует обнуление числа ошибок. Думаю, правильно сделать так:

function getCalc() { 
    var width = +document.getElementById("width").value; 
    var height = +document.getElementById("height").value; 
 
    // Теперь выводит number! 
    console.log(typeof width); 
 
    var max_width = 200; 
    var min_width = 120; 
    var max_height = 240; 
    var min_height = 180; 
 
    var result = 0; 
    var errors = 0; 
 
    // errors block 
    if (width < min_width) { 
        errors = errors + 1; 
        // console.log('W <'); 
    } 
 
    if (height < min_height) { 
        errors = errors + 1; 
        // console.log('H <'); 
    } 
 
    if (width > max_width) { 
        errors = errors + 1; 
        // console.log('W >'); 
    } 
 
    if (height > max_height) { 
        errors = errors + 1; 
        // console.log('H >'); 
    } 
 
    if (errors <= 0) { 
        result = (width * 15) + (height * 10.5); 
        document.getElementById("price").innerHTML = result + " rub."; 
    } else { 
        result = "Error."; 
        document.getElementById("price").innerHTML = result; 
    } 
}

<p>Ширина :</p> 
<input type="text" id="width"> 
 
<p>Высота (см): </p> 
<input type="text" id="height"> 
 
<p>Цена: <span id="price"></span></p> 
 
<button id="btn" onclick="getCalc()">Рассчитать</button>

Вводим 10, 20, получаем искомый Error :)

Answer 2

Если дело в типах данных то можно преобразовать строку к числу например такая запись даст нам тип число var width = +"123"; // number Для сравнения if(+width < +max_width)...

Подробнее здесь https://learn.javascript.ru/types-conversion

Хотя ваш код нормально работает, я просто добавил <div id="price"></div> в HTML

function getCalc() { 
    var width = document.getElementById("width").value; 
    var height = document.getElementById("height").value; 
 
    var max_width = 200; 
    var min_width = 120; 
    var max_height = 240; 
    var min_height = 180; 
 
    var result = 0; 
    var errors = 0; 
 
    // errors block 
    if (width < min_width) { 
        errors = errors + 1; 
 
    } else if (height < min_height) { 
        errors = errors + 1; 
 
    } else { 
        errors = 0; 
    } 
 
    if (width > max_width) { 
        errors = errors + 1; 
 
    } else if (height > max_height) { 
        errors = errors + 1; 
 
    } else { 
        errors = 0; 
    } 
    if (errors <= 0) { 
        result = (width * 15) + (height * 10.5); 
        document.getElementById("price").innerHTML = result + " rub."; 
    } else { 
        result = "Error."; 
        document.getElementById("price").innerHTML = result; 
    } 
}

<p>Ширина :</p> 
<input type="text" id="width"> 
 
<p>Высота (см): </p> 
<input type="text" id="height"> 
 
<button id="btn" onclick="getCalc()">Рассчитать</button> 
 
<div id="price"></div>