Добавить стиль в пустой innerHTML элемента с помощью javascript

У меня есть форма с разными радиовходами. Каждый представляет собой ответ на вопрос. Я хочу, чтобы правильный ответ стал зеленым одним нажатием кнопки. Правильный ответ передается как переменная 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.info(rightAnswer);
        elements = document.getElementsByTagName("input");
        console.info(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.info(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 %}

Вы уже пробовали onchange html event по изменению?

J.vee 19.12.2018 13:08

Спасибо за идею. Я добавил onchange = "changed (this.value)" в поля ввода моей формы. Функция "изменено" выглядит так: function changed (val) {document.getElementById (val) .innerHTML.style.color = "green"; alert ("Входное значение изменилось. Новое значение:" + val); };

Ben_R 19.12.2018 16:11

Предупреждение работает, но я не могу изменить стиль innerHTML поля ввода, так как он все еще не определен.

Ben_R 19.12.2018 16:18
Поведение ключевого слова "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
3
45
1

Ответы 1

Поэтому я поместил радиовходы внутрь этикетки. Таким образом, я наконец смог запросить их с помощью javascript. (Я пытался добраться до их innerHTML, но, поскольку у радиоприемников его нет, это было сложно).

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