Доброго всем дня,
уважаемые, помогите пожалуйста разобраться,
вопрос наверное из ряда простых, но я только начал самостоятельно изучать JS и пока сам не могу разобраться, прошу вашей помощи:
Есть страница html. после определенного текста на страницу выводится пример для решения генерируемый JS далее идет поле формы, в которое пользователю нужно ввести ответ, после ввода ответа скрипт должен проверить ответ и вывести определенное сообщение, в зависимости от правильности ответа.
У меня получается, что пример выводится, потом выводится сообщение генерируемое скриптом, значение из поля не выводится. Т.е. как я понимаю - у меня весь скрипт отрабатывается полностью минуя форму, а должно быть этапами. Пробовал вывести значение формы через alert, не смог, окно выходит но без значения в форме.
Пример своего кода выложить не могу - в попытках решить проблему нещадно его уже исковеркал, стыдно такое выкладывать.
Можете подсказать, реально ли такое сделать вообще? Что я упустил? Мне кажется в моем коде каких-то простых но важных вещей не хватало )
p.s. Вот недостающий код
HTML
<!DOCTYPE hyml>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="my_style.css">
</head>
<body>
<div class="pravila">
<br><h1>ПРОВЕРКА ЗНАНИЙ ТАБЛИЦЫ УМНОЖЕНИЯ</h1><br><br>
<h2>Правила игры</h2>
<p>Для проверки знаний таблицы умножения Вам необходимо решать примеры.<br>
После появления на экране примера, необходимо ввести ответ в соответствующее поле.<br>
В случае правильного ответа Вам начисляется <strong>1 (один)</strong> балл.<br>
В случае неверного ответа с Вашего счета списывается <strong>3 (три)</strong> балла.<br>
Игра заканчивается после того, как Вы наберете <strong>30 (тридцать)</strong> баллов.</p><br><br>
</div>
<div class="zadanie">
<h3 id="zadanie"></h3>
</div>
<form name="reshenie" id="reshenie">
<div class="otvet">
<input id="ot" type="text" name="otvet" value="" placeholder="Введите ответ">
</div>
<div>
<input type="button" class="Knopa" name="Proverka" value="Проверить ответ" id="Proverka">
</div>
</form>
<div class="reshenie">
<h4 id="resh"></h4>
</div>
<script type="text/javascript" src="proga.js"></script>
</body>
JS
function getRandomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var a = getRandomInt(1, 9);
var b = getRandomInt(1, 9);
var proizv = a * b;
var newEl = document.createElement('h3');
var newText = document.createTextNode(a + ' x ' + b + ' =');
newEl.appendChild(newText);
var position = document.getElementById("zadanie");
position.appendChild(newEl);
var otvet = document.getElementById("ot").value;
var newEl2 = document.createElement('h4');
var newText2 = document.createTextNode('Было введено значение - ' + otvet);
newEl2.appendChild(newText2);
var position = document.getElementById("resh");
position.appendChild(newEl2);
CSS
* {
font-family: "Arsenal", sans-serif;
color: white;
background-color: #242424;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 70px;
color: #FC886E;
}
h2 {
font-size: 30px;
color: #7CFCB5;
}
h3 {
font-size: 80px;
color: #FFDD00;
}
p {
font-size: 20px;
width: 50%;
}
#ot {
margin-top: 30px;
background-color: white;
border-color: #FC886E;
font-size: 55px;
border-radius: 10px;
color: #242424;
}
.Knopa {
margin-top: 30px;
padding: 15px;
font-size: 30px;
color: #FC886E;
border-color: #FC886E;
border-radius: 10px;
}
.Knopa:hover {
border-color: white;
}
.Knopa:active {
color: white;
border-color: #FC886E;
background-color: #FC886E;
}
h4 {
margin-top: 20px;
font-size: 40px;
color: white;
}
Средний
