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

Question

Не понимаю, как сделать так, чтобы при нажатии кнопки "Сбросить" сбрасывались не только ответы, но и надписи "правильно", "неправильно". Все, что я надумал, это вот это:

document.getElementById('out').value = "";

Еще я не понимаю, как сделать так, чтобы "правильно", "неправильно" выводились в той же строке, что поля ввода.

Полный код:

function ban() {
   
    document.getElementById("inp1").value = "";
    document.getElementById("inp2").value = "";
    document.getElementById("inp3").value = "";
    document.getElementById("inp4").value = "";
    document.getElementById("inp5").value = "";
    document.getElementById('out').value = "";
}

function output()
{
    let a1 = document.getElementById('inp1').value;
    s1 = document.getElementById('out');
    if (parseInt(a1)==7*6)
    {
        s1.outerHTML = '<p class = "correct">Правильно</p>';
    }
    else{
        s1.outerHTML = '<p class = "uncorrect">Не правильно</p>';
    }

    let a2 = document.getElementById('inp2').value;
    s2 = document.getElementById('out');
    if (parseInt(a2)==8*2)
    {
        s2.outerHTML = '<p class = "correct">Правильно</p>';
    }
    else{
        s2.outerHTML = '<p class = "uncorrect">Не правильно</p>';
    }


    let a3 = document.getElementById('inp3').value;
    s3 = document.getElementById('out');
    if (parseInt(a3)==7*3)
    {
        s3.outerHTML = '<p class = "correct">Правильно</p>';
    }
    else{
        s3.outerHTML = '<p class = "uncorrect">Не правильно</p>';
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="main.js" async> </script>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="parent">
        <div class="verh">
            <img width="50" height="50" src="https://img.icons8.com/ios/50/apple-calculator.png" alt="apple-calculator"/>
            <h1>Тест на знание таблицы умножения</h1>
        </div>
        <div class="input">
            7*6 = 
            <input type="number" id = "inp1">
            <p id="out"> </p>
        </div>
        <div class="input">
            8*2 = 
            <input type="number" id = "inp2">
            <p id="out"> </p>
        </div>
        <div class="input">
            3*7 = 
            <input type="number" id = "inp3">
            <p id="out"> </p>
        </div>
        <div class="input">
            9*8 = 
            <input type="number" id = "inp4">
            <p id="out"> </p>
        </div>
        <div class="input">
            7*8 = 
            <input type="number" id = "inp5">
            <p id="out"> </p>
        </div>
        <div class="actions">
            <button onclick="output()">Ответить</button>
            <button onclick="ban()">Сбросить</button>
        </div>
    </div>
</body>
</html>

БЛОГ НА HUSL

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

Ответы (0 шт):