如何在满足条件后让按钮停用？
[英]How to get buttons to disable after a condition has been met?
问题描述
从我之前的问题中的代码，我现在有一个功能“背包”，当总重量（tot_weight）大于或等于最大重量（“max_weight”）时，该功能应该禁用按钮。 我需要它在条件满足时禁用所有“添加”按钮。（这将导致在达到最大容量时不再接受输入）
我的代码无法正常工作，它只是在选择一个项目后禁用最后一个按钮（我不认为它会检查条件）。
arr_items = new Array(); knap = new Array(); let input = document.getElementById("userinput"); let input2 = document.getElementById("itemName"); let input3 = document.getElementById("itemWeight"); let input4 = document.getElementById("itemValue"); let ul = document.getElementById("list"); let ul2 = document.getElementById("knap") let listCount = 0; let myfunction2; let knapsack; let max_weight; myfunction2 = () =>{ input.value = ""; } let inputLength=() => input2.value.length; let addValues = () =>{ inputs = { name : input2.value, weight : parseFloat(input3.value), value : parseInt(input4.value) } arr_items.push(inputs); console.log(arr_items); createListElement(); myfunction2(); } let createListElement = () => { var li = document.createElement("li"); li.appendChild(document.createTextNode(input2.value)); ul.appendChild(li); input2.value = ""; input3.value = ""; input4.value = ""; let btn = document.createElement("button"); btn.appendChild(document.createTextNode("Add")); li.appendChild(btn); btn.className = "butt"; btn.id = listCount; btn.onclick = addTo; listCount++; // increment the list count variable console.log(input.value); max_weight = input.value; knapsack = (max_weight,knap)=>{ let tot_weight = 0; for(i=0; i<knap.length;i++){ tot_weight = knap[i].weight + tot_weight; } console.log(tot_weight); console.log(max_weight); if (tot_weight >= max_weight){ btn.disabled = true; } } } function addTo(){ var li2 = document.createElement("li"); var id = parseInt(this.id); // retrieve the id of the button li2.appendChild(document.createTextNode(arr_items[id].name)); ul2.appendChild(li2); knap.push(arr_items[id]); //use the id of the button to select array to push to knap from the array item console.log(knap); knapsack(max_weight,knap); } let addListAfterClick = () =>{ if (inputLength() > 0) { addValues(); } }
<!DOCTYPE html> <html> <head> <title>KnapSack</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>KnapSack</h1> <div> <input id="userinput" type="number" placeholder="Enter Capacity"> </div><br> <div> <p>Items Information:</p> <input id="itemName" type="text" placeholder="enter item name"> <input id="itemWeight" type="number" placeholder="enter item weight(kg)"> <input id="itemValue" type="number" placeholder="enter item value"> <button onclick="addListAfterClick()" id="value">Enter</button> </div> <ul id="list">LIST OF 20 ITEMS TO CHOOSE FROM </ul> <ul id="knap"> LIST OF ITEMS IN KNAPSACK </ul> <div> <button onclick="myFunction()" id="done">Done</button> </div> <p id="demo"></p> <script type="text/javascript" src="script.js"></script> <script src="jquery-3.2.1.min.js" ></script> </body> </html>
2 个解决方案
解决方案1
0 2019-04-28 11:26:26
问题是在createListElement()您只能禁用刚刚创建的按钮：
let btn = document.createElement("button");
...
if (tot_weight >= max_weight){
btn.disabled = true;
}
你想要的是禁用所有按钮，所以你可以做一些事情，比如通过className获取所有按钮，并在循环中禁用它们：
allButtons = document.getElementsByClassName( "butt" );
if (tot_weight >= max_weight){
for ( const button of allButtons ) {
button.disabled = true;
}
}
有条件肯定每次都要检查。 这应该解决它。
解决方案2
0 已采纳 2019-04-28 14:22:24
从您的代码中，每次单击“添加”按钮时都会重置max_weight ，这可能会使禁用“添加”按钮的条件异常。
要禁用所有按钮，您必须使用分配给它们的ClassName获取您创建的所有按钮。 这是对代码的修改
arr_items = new Array(); knap = new Array(); let input = document.getElementById("userinput"); let input2 = document.getElementById("itemName"); let input3 = document.getElementById("itemWeight"); let input4 = document.getElementById("itemValue"); let ul = document.getElementById("list"); let ul2 = document.getElementById("knap") let listCount = 0; let myfunction2; let knapsack; let max_weight; let tot_weight = 0; myfunction2 = () =>{ //input.value = ""; I had to comment this line out to avoid resetting max_weight value everytime the add button is click // since we need to evaluate it everytime } let inputLength=() => input2.value.length; let addValues = () =>{ inputs = { name : input2.value, weight : parseFloat(input3.value), value : parseInt(input4.value) } arr_items.push(inputs); console.log(arr_items); createListElement(); myfunction2(); } let createListElement = () => { var li = document.createElement("li"); li.appendChild(document.createTextNode(input2.value)); ul.appendChild(li); input2.value = ""; input3.value = ""; input4.value = ""; let btn = document.createElement("button"); btn.appendChild(document.createTextNode("Add")); li.appendChild(btn); btn.className = "butt"; btn.id = listCount; btn.onclick = addTo; listCount++; // increment the list count variable console.log(input.value); max_weight = input.value; knapsack = (max_weight,knap)=>{ for(i=0; i<knap.length;i++){ tot_weight = knap[i].weight + tot_weight; } console.log(tot_weight); console.log(max_weight); if (tot_weight >= max_weight){ let buttons = document.getElementsByClassName("butt"); // get all the buttons for( let button of buttons){ button.disabled = true; // disable all the buttons } } } } function addTo(){ var li2 = document.createElement("li"); var id = parseInt(this.id); // retrieve the id of the button li2.appendChild(document.createTextNode(arr_items[id].name)); ul2.appendChild(li2); knap.push(arr_items[id]); //use the id of the button to select array to push to knap from the array item console.log(knap); knapsack(max_weight,knap); } let addListAfterClick = () =>{ if (inputLength() > 0) { addValues(); } }
<!DOCTYPE html> <html> <head> <title>KnapSack</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>KnapSack</h1> <div> <input id="userinput" type="number" placeholder="Enter Capacity"> </div><br> <div> <p>Items Information:</p> <input id="itemName" type="text" placeholder="enter item name"> <input id="itemWeight" type="number" placeholder="enter item weight(kg)"> <input id="itemValue" type="number" placeholder="enter item value"> <button onclick="addListAfterClick()" id="value">Enter</button> </div> <ul id="list">LIST OF 20 ITEMS TO CHOOSE FROM </ul> <ul id="knap"> LIST OF ITEMS IN KNAPSACK </ul> <div> <button onclick="myFunction()" id="done">Done</button> </div> <p id="demo"></p> <script type="text/javascript" src="script.js"></script> <script src="jquery-3.2.1.min.js" ></script> </body> </html>
我认为这应该按预期工作
当满足 API 条件时，如何在 Vue.js 中显示组件？
[英]How to show a component in Vue.js when an API condition has been met?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.