Как я могу получить ответ прямо под каждым вопросом, который я сделал с двумя кнопками выбора «правильно» и «неправильно»?

Я сделал 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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
50
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Просто определите ответ на каждый вопрос, а не один ответ на оба вопроса.

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 должен быть определен как ожидающий аргумент, объект события (вы опускаете это в исходном коде).

Другие вопросы по теме