自定义按钮仅在 HTML 列表中的第一个元素起作用



我正在创建一个包含列表的 Django HTML 模板,每个列表都应该有一个自定义按钮,因为存在的许多列表元素必须有一个自定义按钮。此按钮应该在活动和非活动之间切换。使用 JavaScript 创建此切换开关后,它仅适用于列表的第一个元素。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dashboard</title>
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<script src="{% static 'js/dashboard.js' %}">
</script>
</head>
<body>

{% for all_users in users %}     
<li>{{all_users}}

<button onclick="handleToggle()" id="switchName" type="submit"> Switch To Active State
</button>

</li>  
{% endfor %}
<p> this is all {{users}}</p>
<p>there are {{usersCount}} users in the admin and its presently {{now}}</p>
<form method="get">
{{filterUsers.form.as_p}}
<button type="submit">Search</button>
</form>
<ul>
{% for user in filterUsers.qs %}
<li>{{user}}</li>
{% endfor %}
</ul>
</body>
</html>

我对应的 JavaScript 看起来像

function handleToggle() 
{
var elem = document.getElementById("switchName");
if (elem.innerHTML=="Switch To Active State") 
elem.innerHTML = "Switch To Inactive State";
else elem.innerHTML = "Switch To Active State";
}
PLease any suggestions and corrections are veery much welcom

function handleToggle() 
{
var elem = document.getElementById("switchName");
if (elem.innerHTML=="Switch To Active State") {
elem.innerHTML = "Switch To Inactive State";
}
else {
elem.innerHTML = "Switch To Active State";  
}
}

你需要有括号!试试这个

最新更新