javascript - 使用 javascript 中的属性更改输入值

Question

我有数据正确的答案，它保留了正确的答案，如果答案正确，我应该改变边框颜色，如果不是，我应该在输入值中写下正确的答案，我无法想象我应该如何使用属性来做到这一点.

var btn = document.getElementById("myBtn");
btn.addEventListener("click", checkInputs);

var inputs = document.querySelectorAll("input");

function checkInputs(){
	for( var i = 0; i < inputs.length; i++ ){
		if( inputs[i].getAttribute("data-right-answer") == inputs[i].value ){
			inputs[i].style.border = "1px solid green";
		} else{
			// inputs[i].value = getAttribute("data-right-answer");
		}
	}
}

<input type="text" data-right-answer="Lolik">
<input type="text" data-right-answer="Lolik">
<input type="text" data-right-answer="Lolik">
<input type="text" data-right-answer="Lolik">
<input type="text" data-right-answer="Lolik">
<button id="myBtn">Start</button>

Answer 1

您忘记获取 else 条件中的属性值。

inputs[i].value = inputs[i].getAttribute("data-right-answer");

var btn = document.getElementById("myBtn");
btn.addEventListener("click", checkInputs);

var inputs = document.querySelectorAll("input");

function checkInputs(){
	for( var i = 0; i < inputs.length; i++ ){
		if( inputs[i].getAttribute("data-right-answer") == inputs[i].value ){
			inputs[i].style.border = "1px solid green";
		} else{
			inputs[i].value = inputs[i].getAttribute("data-right-answer");
		}
	}
}

<input type="text" data-right-answer="Lolik">
<input type="text" data-right-answer="Lolik">
<input type="text" data-right-answer="Lolik">
<input type="text" data-right-answer="Lolik">
<input type="text" data-right-answer="Lolik">
<button id="myBtn">Start</button>