Как получить значение input?
147
21 октября 2019, 03:30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>site</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<div class="container calculate">
<div class="row">
<div class="col-lg-6 text-center">
<h2>За сколько месяцев окупится<br>установка <span style="color:rgb(89, 190, 224);">ГБО?</span></h2>
<br>
<form action="" id="form">
<input type="text" placeholder=" Введите марку авто" id="input1" required> <button type="button" class="btn btn-primary" id="button_first" style="height:50px;">Далее</button>
</form>
<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-body">
<h3 style="color:rgb(89, 190, 224);margin-top:20px;" class="text-center">Расчет успешно завершен!</h3>
<br>
</div>
<div class="modal-content">
<div class="row">
<div class="col-lg-6">
<h3>Окупаемость и экономия</h5>
<br>
<p>Стоимость установки <span id="price"></span></p>
<p>Окупаемость системы <span id="payback">4 км</span></p>
<p>Экономия в год <span id="economy_year">4 грн</span></p>
<p>Экономия в день <span id="economy_day">4 грн</span></p>
<p>Экономия с 1км пути <span id="economy_km">4 грн</span></p>
<br>
<h4>На 100грн вы проедете</h4>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 50%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" id="oil_bar">192км на бензине</div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" id="gas_bar">329км на газе</div>
</div>
<br>
</div>
<div class="col-lg-6" style="margin-top:50px;">
<h4 id="economy_year">
Оставьте заяку на бесплатную консультацию
</h4>
<p>
Расскажем про особенности установки,виды комплетаций и ответим на ваши вопросы
</p>
<form action="">
<input type="hidden" name="project_name" value="ГБО">
<input type="hidden" name="admin_email" value="admin@mail.com">
<input type="hidden" name="form_subject" value="Form Subject">
<!-- END Hidden Required Fields -->
<input type="text" name="Name" placeholder=" Имя" required><br><br>
<input type="text" name="E-mail" placeholder=" Телефон" required><br><br>
<button class="btn btn-primary">Оставить заявку</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<img src="work/image.png" alt="" width="90%" height="100%">
</div>
</div>
</div>
<br>
<br>
<br>
<!-- Подключаем jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Подключаем плагин Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<!-- Подключаем Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js">
</script>
</body>
</html>Проблема заключается в том, что при попытке присвоить переменной price значение, посредством if, значение price всегда равно 26000
let button = document.getElementById('button_first');
let input1 = document.getElementById('input1');
let form = document.getElementById('form');
var btn2 = document.createElement('button');
var input2 = document.createElement('input');
let input3 = document.createElement('input');
let btn3 = document.createElement('button');
let input4 = document.createElement('input');
let btn4 = document.createElement('button');
let input5 = document.createElement('input');
let btn5 = document.createElement('button');
let input6 = document.createElement('input');
let btn6 = document.createElement('button');
let input7 = document.createElement('input');
let btn7 = document.createElement('button');
let btn8 = document.createElement('button');
var price_field = document.getElementById('price');
var price = 0;
var price_field = document.getElementById('price');
if(input2.value == "3" || "4" ){
var price = 13500;
}
if(input2.value == "5" || "6"){
var price = 26000;
}
//step 1
function step1(){
if (!Element.prototype.remove) {
Element.prototype.remove = function remove() {
if (input1.parentNode) {
input1.parentNode.removeChild(input1);
}
if (button.parentNode) {
button.parentNode.removeChild(button);
}
};
}
input1.remove();
button.remove();
input2.setAttribute('placeholder',' Введите кол-во цилиндров');
form.appendChild(input2);
btn2.innerHTML = "Далее"
btn2.style = "margin-left:5px"
btn2.classList.add('btn');
btn2.classList.add('btn-primary');
btn2.classList.add('button_first');
form.appendChild(btn2);
}
button.addEventListener('click',step1);
function step2(){
if (!Element.prototype.remove) {
Element.prototype.remove = function remove() {
if (input2.parentNode) {
input2.parentNode.removeChild(input2);
}
if (btn2.parentNode) {
btn2.parentNode.removeChild(btn2);
}
};
}
input2.remove();
btn2.remove();
input3.setAttribute('placeholder',' Мощность двигателя');
form.appendChild(input3);
btn3.innerHTML = "Далее"
btn3.style = "margin-left:5px"
btn3.classList.add('btn');
btn3.classList.add('btn-primary');
btn3.classList.add('button_first');
form.appendChild(btn3);
}
btn2.addEventListener('click',step2);
function step3(){
if (!Element.prototype.remove) {
Element.prototype.remove = function remove() {
if (input3.parentNode) {
input3.parentNode.removeChild(input2);
}
if (btn3.parentNode) {
btn3.parentNode.removeChild(btn2);
}
};
}
input3.remove();
btn3.remove();
input4.setAttribute('placeholder',' Средний расход бензина на 100км');
form.appendChild(input4);
btn4.innerHTML = "Далее"
btn4.style = "margin-left:5px"
btn4.classList.add('btn');
btn4.classList.add('btn-primary');
btn4.classList.add('button_first');
form.appendChild(btn4);
}
btn3.addEventListener('click',step3);
function step4(){
if (!Element.prototype.remove) {
Element.prototype.remove = function remove() {
if (input4.parentNode) {
input4.parentNode.removeChild(input4);
}
if (btn4.parentNode) {
btn4.parentNode.removeChild(btn4);
}
};
}
input4.remove();
btn4.remove();
input5.setAttribute('placeholder',' Средний суточнiй пробег');
form.appendChild(input5);
btn5.innerHTML = "Далее"
btn5.style = "margin-left:5px"
btn5.classList.add('btn');
btn5.classList.add('btn-primary');
btn5.classList.add('button_first');
form.appendChild(btn5);
}
btn4.addEventListener('click',step4);
function step5(){
if (!Element.prototype.remove) {
Element.prototype.remove = function remove() {
if (input5.parentNode) {
input5.parentNode.removeChild(input5);
}
if (btn5.parentNode) {
btn5.parentNode.removeChild(btn5);
}
};
}
input5.remove();
btn5.remove();
input6.setAttribute('placeholder',' Стоимость 1л бензина');
form.appendChild(input6);
btn6.innerHTML = "Далее"
btn6.style = "margin-left:5px"
btn6.classList.add('btn');
btn6.classList.add('btn-primary');
btn6.classList.add('button_first');
form.appendChild(btn6);
}
btn5.addEventListener('click',step5);
function step6(){
if (!Element.prototype.remove) {
Element.prototype.remove = function remove() {
if (input6.parentNode) {
input6.parentNode.removeChild(input6);
}
if (btn6.parentNode) {
btn6.parentNode.removeChild(btn6);
}
};
}
input6.remove();
btn6.remove();
input7.setAttribute('placeholder',' Стоимость 1л газа');
form.appendChild(input7);
btn7.setAttribute('data-target','.bd-example-modal-xl');
btn7.setAttribute('data-toggle','modal');
btn7.innerHTML = "Далее"
btn7.style = "margin-left:5px"
btn7.classList.add('btn');
btn7.classList.add('btn-primary');
btn7.classList.add('button_first');
form.appendChild(btn7);
price_field.innerHTML = price + "грн";
}
btn6.addEventListener('click',step6);
function step7(){
if (!Element.prototype.remove) {
Element.prototype.remove = function remove() {
if (input7.parentNode) {
input7.parentNode.removeChild(input7);
}
if (btn7.parentNode) {
btn7.parentNode.removeChild(btn7);
}
};
}
input7.remove();
btn7.remove();
btn8.setAttribute('data-target','.bd-example-modal-xl');
btn8.setAttribute('data-toggle','modal');
btn8.innerHTML = "Посмотреть результат"
btn8.style = "margin-left:5px"
btn8.classList.add('btn');
btn8.classList.add('btn-primary');
btn8.classList.add('button_first');
form.appendChild(btn8);
}
btn7.addEventListener('click',step7);Answer 1
Нельзя за один раз сравнить сразу с несколькими значениями.
В таком виде
input2.value == "3" || "4"
значение инпута будет сравнено с "3", и если оно ему не равно будет возвращено "4", что внутри if будет расценено как true.
Аналогично и со следующим условием.
Вместо этого сравнение нужно добавлять каждый раз:
input2.value == "3" || input2.value == "4"
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47554 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30492 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23626 visits
- Как через css изменить цвет png изображения? 10347 visits
- Blob video url download 9956 visits
- Php curl запрос через прокси с авторизацией 9206 visits
- Работа с captcha vk api 8088 visits
© "hostciti.net" 19.11.2024 | 02:21