Javascript没有隐藏按钮答案

【问题标题】：Javascript not hiding a buttonJavascript没有隐藏按钮
【发布时间】：2018-07-17 21:21:41
【问题描述】：

我有一个在FLASK 后端运行的html 部分，它将生成动态divs。我有两个按钮back 和next。 back 按钮将在第一个div 中禁用。然后从second div 到last div，将显示back 按钮。

并且需要为最后一个 div 禁用下一个按钮。但我无法禁用它。请参阅我的以下代码。这里有什么问题：

     {% set ns = namespace(num=1) %}
{% for i in project %}
{% for j in i %}
     <div id="div{{ ns.num }}" style="display:none;">
        <h4>
          {{ j }}
        </h4>
            <button type="submit" id="nxt" name="project1" class="btn btn-primary m-b-10 m-l-5" style="display:block;float: right" onclick="nextdiv({{ ns.num }});">Next</button>
            <button type="submit" id="bck" name="project" class="btn btn-primary m-b-10 m-l-5" style="display:inline-block;float: right" onclick="backdiv({{ ns.num }});">Back</button>
          </div>
           {% set ns.num = ns.num+1 %}
            {% endfor %}
             {% endfor %}
          </div>

这是我的javascript：

<script type="text/javascript">
document.getElementById('div1').style.display = 'block';
document.getElementById('bck').style.display = 'none';
document.getElementById('nxt').style.display = 'block';
function nextdiv(value) {
  var count = {{ project|count }}
  var count = count-1
  if (value == count) {
  console.log("condition met")
  document.getElementById('div'+(value+1)).style.display = 'block';
  document.getElementById('bck').style.display = 'block';
  document.getElementById('nxt').style.display = 'none';
  document.getElementById('div'+value).style.display = 'none';
}
else{
  console.log("not met")
  document.getElementById('div'+(value+1)).style.display = 'block';
  document.getElementById('bck').style.display = 'block';
  document.getElementById('div'+value).style.display = 'none';
}
}

function backdiv(value) {
   document.getElementById('div'+value).style.display = 'none';
  document.getElementById('div'+(value-1)).style.display = 'block';
 if (value <= 2) {
document.getElementById('bck').style.display = 'none';
 }
}
    </script>

【问题讨论】：

不要使用多个相同的ids。他们应该是独一无二的。并且不要使用像id="div1"这样的东西；如果你想定位一个特定的 div，几乎总是有一个更可取的解决方案，比如document.querySelector("#main > div")[3] 这里的解决方案是使用flask 的条件渲染；在第一个 div 中，首先不要输出后退按钮。
多个相同的ID？？这里所有的 id 都是唯一的..
谁在乎它实际包含多少；你明白我的意思吗？您是否查看了生成的 HTML 并意识到您有大量按钮，所有按钮都使用相同的 id？
如果您有很多带有id="bck" 的按钮，那么document.getElementById('bck') 将始终指代第一个，而不是神奇地正确的那个。您只需要一个 Next 和一个 Back 按钮。
示例代码：jsfiddle.net/khrismuc/539xjnr4

标签： javascript html jinja2

【解决方案1】：

尝试使用

document.getElementById('nxt').style.visibility = 'hidden';

【讨论】：