CODEWITHSUNDEEP
javascript
Marie
Marie

Reputation: 163

Change input value with attribute in javascript

i have data-right-answer which keep the right answer, if the answers right i should change border color, if not i should write the right answer in input value, i can not imagine how i should to do it with attribute.

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>

Upvotes: 0

Views: 56

Answers (3)

Eshu
Eshu

Reputation: 185

$('#myBtn').click(function(){
$('input').each(function(){
	if($(this).attr('data-right-answer')==$(this).val())
	{
	$(this).css('border','1px solid green')
	}
else{
	if($(this).val()!='')
	{
			$(this).val($(this).attr('data-right-answer'))
	}
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Upvotes: 0

Sujan Gainju
Sujan Gainju

Reputation: 4769

You have forgot to get the attribute value in the else condition.

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>

Upvotes: 1

Akhil Aravind
Akhil Aravind

Reputation: 6130

inputs[i].dataset.rightAnswer => this will capture the right answer from the "data-" attribute. :D

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].dataset.rightAnswer == inputs[i].value ){
			inputs[i].style.border = "1px solid green";
		} else{
      inputs[i].value = inputs[i].dataset.rightAnswer;
		}
	}
}
<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>

Upvotes: 0

Related Questions