Я сделал html файл с javascript. Это вопросы с двумя кнопками (правда и неправда). Когда я нажимаю на каждый из них, он отображается либо правильно, либо неправильно.
Например: Земля самая большая планета? Верно - Неправда
Мой вопрос прост, но я новичок, так что не знаю, как это сделать. Как я могу выровнять ответ по каждому вопросу. Потому что, когда я сделал код, ответ на каждый вопрос появляется внизу
window.onload = start;
function start() {}
function showCorrect() {
document.getElementById("text").innerHTML = event.target.value;
}
<label>There is 365 days in a year</label>
<button value = "Right" onclick = "showCorrect(event)">True</button>
<button value = "Wrong" onclick = "showCorrect(event)">Not true</button>
<br>
<label>December is the first month of a year</label>
<button value = "Wrong" onclick = "showCorrect(event)">True</button>
<button value = "Right" onclick = "showCorrect(event)">Not true</button>
<p id = "text"></p>
Просто определите ответ на каждый вопрос, а не один ответ на оба вопроса.
window.onload = start;
function start() {}
function showCorrect(e, id) {
document.getElementById(id).innerHTML = event.target.value;
}
<label>There is 365 days in a year</label>
<button value = "Right" onclick = "showCorrect(event, 'text1')">True</button>
<button value = "Wrong" onclick = "showCorrect(event, 'text1')">Not true</button>
<p id = "text1"></p>
<br>
<label>December is the first month of a year</label>
<button value = "Wrong" onclick = "showCorrect(event, 'text2')">True</button>
<button value = "Right" onclick = "showCorrect(event, 'text2')">Not true</button>
<p id = "text2"></p>
Различные пути. Вот один.
Во-первых, дайте каждому набору вопросов и ответов отдельный контейнер.
<div class=q>
<label>There is 365 days in a year</label>
<button value = "Right" onclick = "showCorrect(event)">True</button>
<button value = "Wrong" onclick = "showCorrect(event)">Not true</button>
</div>
Затем в вашем JS мы можем перемещать элемент #text
в зависимости от того, на какой вопрос был дан ответ. Мы добавляем его в контейнер этого вопроса.
let text = document.querySelector('#text');
function showCorrect(event) {
text.textContent = event.target.value;
evt.target.closest('.q').appendChild(text);
}
PS не забывайте, что showCorrect
должен быть определен как ожидающий аргумент, объект события (вы опускаете это в исходном коде).