从上一个问题中的代码开始,我现在有了一个“背包”功能,当总重量(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>
答案 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>
我认为这应该可以预期