Неактивная кнопка

Mosh_Tumuch · 26.Декабрь.2022 11:31:02

Как сделать, чтобы кнопка была неактивна, если input пустой?

<body>
    <div class="navigation">
        <ul class="nav">
            <li><a href="index.html" class="nav-link">Главная</a></li>
            <li><a href="choose.html" class="nav-link">Билеты ПДД</a></li>
            <li><a href="test.html" class="nav-link">Тест на знание знаков</a></li>
            <li><a href="pdd.html" class="nav-link">Читать ПДД</a></li>
        </ul>
    </div>
 <div class="centered">
 
<div id="vopros1" style="display:block;">
<span class="questionPlace" id="v_1"></span>
<input class="input" placeholder="Введите название знака..." id="z_1">
<span class="corAnsw" id="correctAnswer" style="display:none;"></span>
</div>
 
 
 
<div id="vopros2" style="display:none;">
<span class="questionPlace" id="v_2"></span> 
<input class="input" placeholder="Введите название знака..." id="z_2">
<span class="corAnsw" id="correctAnswer1" style="display:none;"></span>
</div>
 
 
 
<div id="vopros3" style="display:none;">
<span class="questionPlace" id="v_3"></span> 
<input class="input" placeholder="Введите название знака..." id="z_3">
<span class="corAnsw" id="correctAnswer2" style="display:none;"></span>
</div>
 
 
 
<div id="vopros4" style="display:none;">
<span class="questionPlace" id="v_4"></span> 
<input class="input" placeholder="Введите название знака..." id="z_4">
<span class="corAnsw" id="correctAnswer3" style="display:none;"></span>
</div>
 
 
 
<div id="vopros5" style="display:none;">
<span class="questionPlace" id="v_5"></span> 
<input class="input" placeholder="Введите название знака..." id="z_5">
<span class="corAnsw" id="correctAnswer4" style="display:none;"></span>
</div>
 
 
 
<div id="vopros6" style="display:none;">
<span class="questionPlace" id="v_6"></span> 
<input class="input" placeholder="Введите название знака..." id="z_6">
<span class="corAnsw" id="correctAnswer5" style="display:none;"></span>
</div>
 
 
<button id="button" style="margin-left:auto;margin-right:auto;width:250px;" onclick="enabled(); proverka(); setTimeout(sled_vopr, 3000);">Проверка</button>
</div>
 
 
<script>
    var otv_uch_1, otv_uch_2, otv_uch_3, otv_uch_4, otv_uch_5, otv_uch_6;
    document.addEventListener('DOMContentLoaded', function(){
        
        voprosi = [
        ["<img src='https://ruspdd.com/priority-signs/2.4/sign-2-4.svg'>", "Уступите дорогу"],
        ["<img src='https://setka77.ru/u2/content/big/u/gallery/553/111602812.jpg'>", "Главная дорога"],
        ["<img src='https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Romania_road_sign_A41.svg/1200px-Romania_road_sign_A41.svg.png'>", "Железнодорожный переезд со шлагбаумом"],
        ["<img src='https://www.signal-doroga.ru/upload/shop_1/2/5/5/item_255/shop_items_catalog_image255.png'>", "Железнодорожный переезд без шлагбаума"],
        ["<img src='https://autolex.net/wp-content/uploads/2018/12/znak_1_3_1.png'>", "Однопутная железная дорога"],
        ["<img src='https://etalon365.ru/905-large_default/132-mnogoputnaya-zheleznaya-doroga.jpg'>", "Многопутная железная дорога"]
    ];
    voprosi = peremeshat_vse_voprosi(voprosi);
    document.getElementById('v_1').innerHTML = voprosi[0][0];
    document.getElementById('v_2').innerHTML = voprosi[1][0];
    document.getElementById('v_3').innerHTML = voprosi[2][0];
    document.getElementById('v_4').innerHTML = voprosi[3][0];
    document.getElementById('v_5').innerHTML = voprosi[4][0];
    document.getElementById('v_6').innerHTML = voprosi[5][0];
 
});
 
function enabled() {
let inp = document.querySelector('#input');
let btn = document.querySelector('#button');
 
inp.addEventListener("input", function(){
    if (inp.value === ""){
    btn.disabled = true;
  } else {
    btn.disabled = false;
  }
})
}
 
function proverka() {
 
var trueCounter = 0;
let button = document.querySelector('#button');
 
Богнюков Саша Билайн, [25.12.2022 20:32]
otv_uch_1 = document.getElementById('z_1').value;
var otv_uch_1lowercase = otv_uch_1.toLowerCase();
var vopros1lowercase = voprosi[0][1].toLowerCase();
if (otv_uch_1){
if (otv_uch_1lowercase === vopros1lowercase) {
    z_1.classList.remove('incorrect');
    z_1.classList.add('correct');
    trueCounter++;
} else {
    z_1.classList.remove('correct');
    z_1.classList.add('incorrect');
    document.getElementById('correctAnswer').style.display = 'block';
    document.getElementById('correctAnswer').innerHTML = "Неверно! Этот знак называется: " + voprosi[0][1];
}
}
 
otv_uch_2 = document.getElementById('z_2').value;
var otv_uch_2lowercase = otv_uch_2.toLowerCase();
var vopros2lowercase = voprosi[1][1].toLowerCase();
if (otv_uch_2) {
if (otv_uch_2lowercase === vopros2lowercase) {
    z_2.classList.remove('incorrect');
    z_2.classList.add('correct');
    trueCounter++;
} else {
    z_2.classList.remove('correct');
    z_2.classList.add('incorrect');
    document.getElementById('correctAnswer1').style.display = 'block';
    document.getElementById('correctAnswer1').innerHTML = "Неверно! Этот знак называется: " + voprosi[1][1];
}
}
 
otv_uch_3 = document.getElementById('z_3').value;
var otv_uch_3lowercase = otv_uch_3.toLowerCase();
var vopros3lowercase = voprosi[2][1].toLowerCase();
if (otv_uch_3) {
if (otv_uch_3lowercase === vopros3lowercase) {
    z_3.classList.remove('incorrect');
    z_3.classList.add('correct');
    trueCounter++;
} else {
    z_3.classList.remove('correct');
    z_3.classList.add('incorrect');
    document.getElementById('correctAnswer2').style.display = 'block';
    document.getElementById('correctAnswer2').innerHTML = "Неверно! Этот знак называется: " + voprosi[2][1];
}
}
otv_uch_4 = document.getElementById('z_4').value;
var otv_uch_4lowercase = otv_uch_4.toLowerCase();
var vopros4lowercase = voprosi[3][1].toLowerCase();
if (otv_uch_4) {
if (otv_uch_4lowercase === vopros4lowercase) {
    z_4.classList.remove('incorrect');
    z_4.classList.add('correct');
    trueCounter++;
} else {
    z_4.classList.remove('correct');
    z_4.classList.add('incorrect');
    document.getElementById('correctAnswer3').style.display = 'block';
    document.getElementById('correctAnswer3').innerHTML = "Неверно! Этот знак называется: " + voprosi[3][1];
}
}
 
otv_uch_5 = document.getElementById('z_5').value;
var otv_uch_5lowercase = otv_uch_5.toLowerCase();
var vopros5lowercase = voprosi[4][1].toLowerCase();
if (otv_uch_5) {
if (otv_uch_5lowercase === vopros5lowercase) {
    z_5.classList.remove('incorrect');
    z_5.classList.add('correct');
    trueCounter++;
} else {
    z_5.classList.remove('correct');
    z_5.classList.add('incorrect');
    document.getElementById('correctAnswer4').style.display = 'block';
    document.getElementById('correctAnswer4').innerHTML = "Неверно! Этот знак называется: " + voprosi[4][1];
}
}
 
otv_uch_6 = document.getElementById('z_6').value;
var otv_uch_6lowercase = otv_uch_6.toLowerCase();
var vopros6lowercase = voprosi[5][1].toLowerCase();
if (otv_uch_6){
if (otv_uch_6lowercase === vopros6lowercase) {
    z_6.classList.remove('incorrect');
    z_6.classList.add('correct');
    trueCounter++;
} else {
    z_6.classList.remove('correct');
    z_6.classList.add('incorrect');
    document.getElementById('correctAnswer5').style.display = 'block';
    document.getElementById('correctAnswer5').innerHTML = "Неверно! Этот знак называется: " + voprosi[5][1];
}
alert("Конец игры! Правильных ответов: " + trueCounter + " из 6");
}
}
function sled_vopr(){
    
    if(document.getElementById('vopros5').style.display == "block"){
        document.getElementById('vopros5').style.display = "none";
        document.getElementById('vopros6').style.display = "block";
}
    if(document.getElementById('vopros4').style.display == "block"){
        document.getElementById('vopros4').style.display = "none";
        document.getElementById('vopros5').style.display = "block";
    }
    if(document.getElementById('vopros3').style.display == "block"){
        document.getElementById('vopros3').style.display = "none";
        document.getElementById('vopros4').style.display = "block";
    }
    if(document.getElementById('vopros2').style.display == "block"){
        document.getElementById('vopros2').style.display = "none";
        document.getElementById('vopros3').style.display = "block";
    }
    if(document.getElementById('vopros1').style.display == "block"){
        document.getElementById('vopros1').style.display = "none";
        document.getElementById('vopros2').style.display = "block";
    }
}
 
 
function peremeshat_vse_voprosi(m_vopros) {
    for (var i = m_vopros.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = m_vopros[i];
        m_vopros[i] = m_vopros[j];
        m_vopros[j] = temp;
    }
    return m_vopros;
}
</script>
 
</body>
</html>

может дело в онлике?
<button id="button" disabled style="margin-left:auto;margin-right:auto;width:250px;" onclick="enabled(); proverka(); setTimeout(sled_vopr, 3000);">Проверка</button>

AlexP · 26.Декабрь.2022 11:47:02

<input id="myInput" oninput="checkInput()">
<button id="myButton">Button</button>

function checkInput() {
  const btn = document.querySelector('#myButton');
  const input = document.querySelector('#myInput');
  
  btn.disabled = input.value.trim().length === 0;
}

checkInput();

https://jsfiddle.net/pxf4o23y/

Mosh_Tumuch · 26.Декабрь.2022 12:01:38

Работает, но только с первым инпутом. У меня id уже используется для input. Можно ли как нибудь также сделать, только с классом?

AlexP · 26.Декабрь.2022 15:32:12

Не понял причем тут id (в querySelector можно указать любой CSS селектор), но вообще тут слишком много копипаста в коде и в него сложно что-либо добавить. Надо переписать нормально с циклами, массивами.

А неактивность с несколькими инпутами (показываемыми по-очереди) можно как-нибудь так сделать.

<p>
  input 1
  <input class="myInput">
</p>
<p style="display: none;">
  input 2
  <input class="myInput">
</p>
<p style="display: none;">
  input 3
  <input class="myInput">
</p>
<button id="myButton">Button</button>

const btn = document.querySelector('#myButton');
const inputs = document.querySelectorAll('.myInput');

function checkInput(input) {
  btn.disabled = input.value.trim().length === 0;
}

let currentInputIndex = 0;

checkInput(inputs[currentInputIndex]);

for (let input of inputs) {
  input.addEventListener('input', function (e) {
    checkInput(e.target);
  });
}

btn.addEventListener('click', function () {
  inputs[currentInputIndex].parentElement.style.display = 'none';
  currentInputIndex++;  
  inputs[currentInputIndex].parentElement.style.display = '';
  checkInput(inputs[currentInputIndex]);
});

https://jsfiddle.net/pxf4o23y/1/

Ну и для переписывания всей задачи без копипаста для каждого вопроса тоже можно вдохновиться идеями отсюда )