Показать сообщение отдельно
  #7 (permalink)  
Старый 24.02.2022, 00:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,080

igorzyden,
<head>
    <title>Математические задания</title>
    <meta charset="utf-8">
    <style type="text/css">
    body{
        counter-reset: num 0;
    }
    .primer:before{
    counter-increment: num ;
    content:  counter(num)'. ';}

    </style>
</head>

<body>
    <div class="primer">
        <span class="num"></span> +
        <span class="num"></span> =
        <input type="number" class="plus" width="5">
        <button type="button">Проверить</button>
        <p class="result"></p>
    </div>

</body>
<script>
    const random = n => Math.round(Math.random() * n);
    let block = document.querySelector('.primer');
    let length = 99;
    let arr = Array.from({length}, _ => block.cloneNode(true));
    document.body.append(...arr);
    document.querySelectorAll('.primer').forEach(div => {
        let sum = 0;
        div.querySelectorAll('.num').forEach(span => {
            let num = random(10);
            span.textContent = num;
            sum += num;
        })
        let input = div.querySelector('.plus'),
            button = div.querySelector('button'),
            result = div.querySelector('.result');
        button.addEventListener('click', _ => result.textContent = input.value == sum ? 'Правильно' : 'Неправильно')
    })
</script>
Ответить с цитированием