Javascript &引用；如何修复激活循环中所有按钮的onclick（）_Javascript_Html

Javascript &引用；如何修复激活循环中所有按钮的onclick（）

javascript html

Javascript &引用；如何修复激活循环中所有按钮的onclick（）,javascript,html,Javascript,Html,我正在制作一个html，其中我有一对o按钮和事件，当触发时显示文本。问题是，单击任一按钮时，它只显示与第一个按钮相关的文本 <body> </div> {% if latest_question_list %} {% for questao in latest_question_list %} <p><input type="submit" onclick="myFunction()" class="greybutton" v

我正在制作一个html，其中我有一对o按钮和事件，当触发时显示文本。问题是，单击任一按钮时，它只显示与第一个按钮相关的文本

<body>

</div>
{% if latest_question_list %}
    {% for questao in latest_question_list %}
        <p><input type="submit" onclick="myFunction()" class="greybutton" value="{{ questao.questao_texto }}"/></p>
        <div id="show" style="display: none">
        <div class="aligned">
            <div id="show2" style="display: none" >
                <div class="right">
                    {% for opcao in questao.opcao_set.all %}
                       <li style="background-color: red; color: white; border: 1px solid white">{{ opcao.opcao_texto }} --
                            {{ opcao.votos }}
                            voto{{ opcao.votos|pluralize }}</li>
                    {% endfor %}
                </div>
            </div>
        </div>
            <div class="aligned">
                <form action="{% url 'desporto:sondagens' %}"
                      method="post">
                    {% csrf_token %}
                    {% for opcao in questao.opcao_set.all %}
                        <input type="radio" name="opcao" id="opcao{{ forloop.counter }}" value="{{ opcao.id }}" />
                        <label for="opcao{{ forloop.counter }}"> {{ opcao.opcao_texto }} </label>
                        <br >
                    {% endfor %}
                    <p>  <input type="submit" value="Votar" class="rwbutton"> </p>
                </form>
                <p>  <input type="submit" value="Ver resultados" onclick="toogle()" class="rwbutton" /></p>
            </div>
        </div>
    {% endfor %}

{% else %}
    <div class="aligned">
        <p>Nao ha sondagens disponiveis.</p>
    </div>

{% endif %}
<br>
<div id="footer"></div>
</body>
</html>

它应该向每个按钮显示每个文本。

无论如何都要这样做吗？

问题是您有许多元素具有相同的ID（

show

）。请尝试为每个元素指定唯一的ID（例如show_0、show_1、show_2等），并将索引传递给

myFunction（）

，以便它知道要获取哪些元素

因此，你可以：

<p><input type="submit" onclick="myFunction({{forloop.counter0}})" class="greybutton" value="{{ questao.questao_texto }}"/></p>
 <div id="show_{{forloop.counter0}}" style="display: none">

Html id属性值必须是唯一的。您使用的是一个循环，因此有多个元素具有相同的id。您可以添加一个CSS类并选择分配了该类的所有输入。

function myFunction() {
  var x = document.getElementById("show");

  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

<p><input type="submit" onclick="myFunction({{forloop.counter0}})" class="greybutton" value="{{ questao.questao_texto }}"/></p>
 <div id="show_{{forloop.counter0}}" style="display: none">

function myFunction(index) {
  var x = document.getElementById("show_" + index);
  //...
}