Как размножить HTML-код и функцию через Javascript?
Для кого-то может это вопрос 1-го класса, но я уже не первый день не могу придумать как реализовать.
Реализована задачка, когда генерируется два рандомных числа от 1 до 10 и предлагается ввести ответ их суммы, а кнопкой проверить правильность. Возможно, указанный мной код можно было иначе составить.
<head>
<title>Математические задания</title>
</head>
<body>
<div id="primer">
<span id="inp_1"></span> +
<span id="inp_2"></span> =
<input type="number" id="plus" width="5">
<button onclick="multi()">Проверить</button>
<p id="result"></p>
</div>
</body>
<script type="text/javascript">
var multi_1;
multi_1 = Math.round(Math.random()*10);
multi_1 = document.getElementById('inp_1').innerHTML = multi_1;
var multi_2;
multi_2 = Math.round(Math.random()*10);
multi_2 = document.getElementById('inp_2').innerHTML = multi_2;
result1 = multi_1 + multi_2;
result = document.getElementById('result');
function multi()
{
check = document.querySelector('input').value;
if (result1 == check)
result.innerHTML = "Правильно";
else
result.innerHTML = "Неправильно";
}
</script>
А теперь нужно, чтобы таких примеров было, скажем, пять. Как при помощи Javascript это реализовать, чтобы не вручную пять раз копировать куски кода? То есть, число1 + число2 = input [Проверить данный ответ] число1 + число2 = input [Проверить данный ответ] число1 + число2 = input [Проверить данный ответ] число1 + число2 = input [Проверить данный ответ] число1 + число2 = input [Проверить данный ответ] Догадываюсь, что при помощи цикла и массивов, но правильно код так и не смог собрать. |
igorzyden,
избавьтесь от id. |
Цитата:
И каким образом это размножит? |
igorzyden,
<head>
<title>Математические задания</title>
<meta charset="utf-8">
</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>
<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>
<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);
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>
|
рони,
в плане результата, спасибо, работает. Но по реализации, получается без копирования вручную участка кода <div class="primer">....</div> вообще не обойтись и при помощи, например, цикла Javascript это не заменить? И если бы примеров нужно было бы 100, то значит нужно 100 раз вручную копировать ту часть кода? |
igorzyden,
клонируйте блок сколько вам нужно в строке 31 |
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>
|
Супер.
Спасибо |
Походу совсем туго у меня с соображалкой, но мозг уже сломал и не придумал как сделать следующее.
Теперь надо чтобы в текущем коде генерируемые суммы двух цифр были не больше 10. То есть, если генерируется 4+7 и т.п., то значит этот пример не подходит и надо чтобы вместо него сгенерировался другой. Ну и понятно, чтобы все примеры соответствовали требованием и количество примеров задавалось клонированием. |
Цитата:
<!DOCTYPE html>
<html>
<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>
<script>
const random = n => Math.round(Math.random() * n);
const total = n => {
let a = random(n),
b = random(n - a);
return [a, b]
};
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,
num = total(10);
div.querySelectorAll('.num').forEach((span, i) => {
span.textContent = num[i];
sum += num[i];
})
let input = div.querySelector('.plus'),
button = div.querySelector('button'),
result = div.querySelector('.result');
button.addEventListener('click', _ => result.textContent = input.value == sum ? 'Правильно' : 'Неправильно')
})
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 17:13. |