Question

此代码旨在在单击按钮后将其显示在另一个div中后，将数组中的数字附加到div中显示的字符串。单击一次按钮后，数字会正确显示，但是不能单击两次。

var index = 1;
	var chartData = [103, 144, 142, 141]
	function update_num(index, l){
		console.log(l[index - 1])
		document.getElementById('box1').innerHTML = l[index - 1] + ' MU';
		setTimeout(function(){
			document.getElementById('box1').innerHTML = ' ';			
		}, 1000);
		setTimeout(function(){
			document.getElementById('canvas').innerHTML = document.getElementById('canvas').innerHTML + ' ' + l[index - 1];			
		}, 1000);
	}

	function func_num() {
        var index = 1;   
		/*Define what should happen after the button is clicked*/
        document.getElementById("b").onclick = function(){

            var buttonB =  document.getElementById('b');
            buttonB.disabled = true;   
            if(index <= 2 ){
				update_num(index, chartData);
				if(index == 1){
					buttonB.innerHTML = 'Next Draw';
					buttonB.style.left ='405px';
				}
				index++;
				setTimeout(function(){
					buttonB.disabled = false;
					console.log('aaa ' + buttonB.disabled);
				}, 1000);
	
			} else if (index == 3){
				while (index < chartData.length){
					setTimeout(function(){update_num(index, chartData);}, 2000 * (index - manualClicks));
					index ++;
				}
				setTimeout(function(){buttonB.disabled = false;}, 1000);
				buttonB.innerHTML = 'To Task';
            }else{
                buttonB.style.visibility="hidden";
            }
			console.log('run6661' + buttonB.disabled);
            if(index == 3 ){
                setTimeout(function(){buttonB.innerHTML = 'Automatically Draw for {{ machine_cl }} times';}, forceToLookTime);
            }
        };
	}

   func_num();

    <div id='canvas' style='position:relative;width:1305px;height:420px; margin: auto; margin-top: 20px;'>
<div>
        <button id='b'  type='button' style='visibility: visible; position: relative; left: 440px; top: 350px;'>Start</button>
        
        <div id='box1'  style='visibility: visible; position: relative; top: 300px; left: 40px; text-align: center;' >
        </div>

Answer 1

来自SPEC：

2.4.2。布尔属性

许多属性是布尔属性。一个的存在   元素上的boolean属性表示真实值，并且   没有属性表示错误值。

也：

布尔值属性不允许使用值“ true”和“ false”。为了表示一个假值，必须省略该属性完全。

也就是说，您必须像这样明确地删除属性：

document.getElementById('my_button').removeAttribute("disabled");

Answer 2

您的Javascript代码完全没问题，问题出在标记上。您正在打开<div>标签，但没有像</div>那样正确关闭它。

更改

<div id='canvas' style='position:relative;width:1305px;height:420px; margin:auto; margin-top: 20px;'>
<div>

到

<div id='canvas' style='position:relative;width:1305px;height:420px; margin:auto; margin-top: 20px;'>
</div>

为什么禁用按钮后不能重新启用按钮？

2 个答案: