满足条件后如何使按钮禁用?

时间:2019-04-28 10:57:40

标签: javascript html

从上一个问题中的代码开始,我现在有了一个“背包”功能,当总重量(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 个答案:

答案 0 :(得分:0)

问题在于,在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;
  }
}

肯定每次都会检查条件。这应该可以解决。

答案 1 :(得分:0)

每次单击“添加”按钮时,都会重置代码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>

我认为这应该可以预期