Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Ребят помогите пожалуйста не работает код! (https://javascript.ru/forum/misc/69418-rebyat-pomogite-pozhalujjsta-ne-rabotaet-kod.html)

Zombie_Killer 20.06.2017 23:24

Ребят помогите пожалуйста не работает код!
 
У меня работает вычисление периметра и площади квадрата и прямоугольника но когда я пытался сделать что-то подобное с треугольником у меня не выполнялось вычисление ,а строчки просто складывались как строчки.Помогите пожалуйста, вот код:
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8"/>
    <title>Главная</title>
    <link rel="stylesheet" href="style.css"/>
    <script src="script.js"></script>
</head>
<body>
    <form action="" method="post" id="myform">
        <div id="re">
            <h3>Вычисление площади и периметра прямоугольника и квадрата</h3>
            <div>Введите первую сторону:</div>
            <input type="text" id="S_P_re_first" maxlength="11">
            <br /><br />
            <div>Введите вторую сторону:</div>
            <input type="text" id="S_P_re_second" maxlength="11">
            <br /><br />
            <input type="button" id="button_re" onclick="result_re()" value="Вычислить">
            <input type="button" id="button_re_reset" onclick="reset_re()" value="Обновить все">
            <p id="result_p_re">Периметр:</p>
            <p id="result_s_re">Площадь:</p>
        </div>
        <div id="tr">
            <h3>Вычисление площади и периметра треугольника</h3>
            <div>Введите первую сторону:</div>
            <input type="text" id="S_P_tr_first" maxlength="11">
            <br /><br />
            <div>Введите вторую сторону:</div>
            <input type="text" id="S_P_tr_second" maxlength="11">
            <br /><br />
            <div>Введите третью сторону:</div>
            <input type="text" id="S_P_tr_third" maxlength="11">
            <br /><br />
            <input type="button" id="button_tr" onclick="result_tr()" value="Вычислить">
            <input type="button" id="button_re_reset" value="Обновить все">
            <p id="result_p_tr">Периметр:</p>
            <p id="result_s_tr">Площадь:</p>
        </div>
     </form>
</body>
</html>

//Площадь и периметр квадрата и прямоугольника
function result_re(a,b){
    a = document.getElementById('S_P_re_first').value;
    b = document.getElementById('S_P_re_second').value;
    res_p = a * 2 + b * 2;
    res_s = a * b;
    if (a == "" || b == ""){
        alert("Вы не ввели значение!");
    }else {
        document.getElementById('result_p_re').innerHTML = "Периметр: "+res_p+" СМ";
        document.getElementById('result_s_re').innerHTML = "Площадь: "+res_s+" СМ<sup>2</sup>";
    }
    return res_p, res_s;
}
function reset_re(){
    document.getElementById('S_P_re_first').value = "";
    document.getElementById('S_P_re_second').value = "";
    document.getElementById('result_p_re').innerHTML = "Периметр: ";
    document.getElementById('result_s_re').innerHTML = "Площадь: ";
    }
//Площадь и периметр треугольника
function result_tr(a,b,c){
    a = document.getElementById("S_P_tr_first").value;
    b = document.getElementById("S_P_tr_second").value;
    c = document.getElementById("S_P_tr_third").value;
    parseInt(a);
    parseInt(b);
    parseInt(c);
    res_p = a + b + c;
    res_s = (a * b) * 0.5;
    if(a == "" || b == ""){
        alert('Вы не ввели значение!');
    }else{
        document.getElementById('result_p_tr').innerHTML = "Периметр: "+res_p+" СМ";
        document.getElementById('result_s_tr').innerHTML = "Площадь: "+res_s+" СМ<sup>2</sup>";
    }
}

CSS:
Код:

#result_p_re,#result_s_re{
    position: relative;
    left: 220px;
    bottom: 125px;
    width: 800px;
    height: 20px;
    border: 2px solid black;
    padding: 2px 0px 2px 5px;
    vertical-align: middle;
}
#result_s_tr,#result_p_tr{
    position: relative;
    left: 220px;
    bottom: 155px;
    width: 800px;
    height: 20px;
    border: 2px solid black;
    padding: 2px 0px 2px 5px;
    vertical-align: middle;
}
#tr{
    position: relative;
    bottom: 90px;
}


рони 20.06.2017 23:41

Zombie_Killer,
a = +document.getElementById("S_P_tr_first").value; красное во все похожие строки и убрать parseInt

или исправить parseInt(a); на a = parseInt(a); и похожие строки

Zombie_Killer 20.06.2017 23:42

Спасибо!А зачем нужен этот плюс?

j0hnik 20.06.2017 23:44

или так
//Площадь и периметр треугольника
function result_tr(a,b,c){
    a = document.getElementById("S_P_tr_first").value*1;
    b = document.getElementById("S_P_tr_second").value*1;
    c = document.getElementById("S_P_tr_third").value*1;
    res_p = a + b + c;
    res_s = (a * b) * 0.5;
    if(a == "" || b == ""){
        alert('Вы не ввели значение!');
    }else{
        document.getElementById('result_p_tr').innerHTML = "Периметр: "+res_p+" СМ";
        document.getElementById('result_s_tr').innerHTML = "Площадь: "+res_s+" СМ<sup>2</sup>";
    }
}

рони 20.06.2017 23:45

Zombie_Killer,
преобразование-к-числу

рони 20.06.2017 23:53

Zombie_Killer,
значение value это строка - плюс или умножение на 1, сделают из строки число, и лучше вместо onclick в теге, пробовать addEventListener в скрипте


Часовой пояс GMT +3, время: 21:58.