我有一个在FLASK
后端运行的html部分,它将产生动态的divs
。我有两个按钮back
和next
。 back
中的div
按钮将被禁用。然后,从second div
到last div
,将显示back
按钮。
最后一个div需要禁用next按钮。但是我无法禁用它。见我下面的代码。这里出什么问题了:
{% 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>
答案 0 :(得分:0)
尝试使用
document.getElementById('nxt').style.visibility = 'hidden';