Question

我有一个带有不同无线电输入的表格。每个代表一个问题的答案。我想通过单击按钮将正确答案变为绿色。正确答案作为Flask变量{{}}传递。我选择所有输入字段并将其保存在元素中。然后，我用循环过滤出正确的结果并将其存储在结果中。单击按钮后，将执行“单击”功能，并应更改结果样式。不幸的是，控制台告诉我，结果是不确定的。我检查了innerHTML，它为空白。问题可能是innerHTML是flask变量，而不是硬编码的。有谁知道我如何更改适当的输入字段样式？

{% 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 %}

Answer 1

因此，我将无线电输入置于标签中。这样，我最终可以使用javascript查询它们。（我试图使用它们的innerHTML，但是由于无线电没有任何东西，所以很困难）。

使用javascript将样式添加到元素的空白innerHTML

1 个答案: