Change input value with attribute in javascript

Question

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>

Sujan Gainju · Accepted Answer · 2018-06-25 11:30:51Z

1

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>

answered Jun 25, 2018 at 11:30

Sujan Gainju

4,7872 gold badges16 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Akhil Aravind · Accepted Answer · 2018-06-25 11:27:43Z

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>

Eshu · Accepted Answer · 2018-06-25 11:43:47Z

0

$('#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>

edited Jun 25, 2018 at 11:43

answered Jun 25, 2018 at 11:37

Eshu

1856 bronze badges

Collectives™ on Stack Overflow

Change input value with attribute in javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related