У меня есть форма с разными радиовходами.Каждый представляет ответ на вопрос.Я хочу включить правильный ответ зеленым цветом по нажатию кнопки.Правильный ответ передается как переменная Flask {{}}.Я выбираю все поля ввода и сохраняю их в элементах.Затем я отфильтрую правильную петлю и сохраню ее в результатах.При нажатии кнопки выполняется функция «нажал», и предполагается, что она изменит стиль результатов.К сожалению, консоль говорит мне, что результаты не определены.Я проверил innerHTML, и он пуст.Возможно, проблема в том, что innerHTML - это переменная колбы, а не жестко закодированная.У кого-нибудь есть идея, как я могу изменить соответствующий стиль ввода полей?
{% extends "layout.html" %}
{% block body %}
{% if cq == -1 %}
<h3>Great, all questions where answered.</h3>
<a href=" {{ url_for('index') }} ">Go back.</a>
{% else %}
<h3>Question number {{ cq+1 }}:</h3>
<p id="quest">{{ myVariable.q }}</p>
<form action="/quiz" method="GET">
<input type="radio" name="answer" value="a">{{ myVariable.a }}</input></br>
<input type="radio" name="answer" value="b">{{ myVariable.b }}</input></br>
<input type="radio" name="answer" value="c">{{ myVariable.c }}</input></br>
<input type="radio" name="answer" value="d">{{ myVariable.d }}</input></p>
<input type="hidden" name="cq" value="{{ nq }}"/>
<input type="hidden" name="pq" value="{{ cq }}"/>
<br/>
<input type="submit" value="Check & goto next question">
</form>
<button type="button" onclick="clicked()">My Button</button>
{% endif %}
<br/><br/>
{% if pq_correct >= 0 %}
<h3>Check of your previous answer:</h3>
{% endif %}
{% if pq_correct == 1 %}
<p>TOP! Your previous Answer was correct.</p>
{% elif pq_correct == 0 %}
<p>Sorry! Your previous Answer was <b>not</b> correct.
<a href="?cq={{ pq }}">Try again (goto previous question)</a>
</p>
{% endif %}
<p> Correct answers: {{ count }}</p>
<script>
window.onload = function() {
var rightAnswer = '{{ answerVar }}';
console.log(rightAnswer);
elements = document.getElementsByTagName("input");
console.log(elements[0].innerHTML); // blank
elements[0].innerHTML = "Test"; // doesn't appear
var results = [];
for(var x = 0; x < elements.length; x++)
if(elements[x].value == rightAnswer)
results.push(elements[x]);
console.log(results);
};
function clicked(rightAnswer){
// set correct answer green
// results[0].innerHTML.style.color = "green"; // console - "results not defined"
alert('It should work, why doesn\'t it work?');
};
</script>
{% endblock %}