Изменить входное значение с атрибутом в javascript

У меня есть данные-правильные ответы, которые сохраняют правильный ответ, если ответы правильные, я должен изменить цвет границы, если нет, я должен написать правильный ответ во входном значении, я не могу представить, как я должен делать это с атрибутом.

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>

javascript

25.06.2018 13:19

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

input [i] .dataset.rightAnswer => это захватит правильный ответ из атрибута "data-". : 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>

25.06.2018 13:27

Ответ принят как подходящий

Вы забыли получить значение атрибута в условии 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>

25.06.2018 13:30

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

25.06.2018 13:37

Другие вопросы по теме

Группировать недели в квартал для определенного года

Функция Eval не работает

(Vue, ChartJS) Создание градиентного фона для диаграммы из контекста холста дочернего компонента

Работает ли CanvasRenderingContext2D.drawImage () асинхронно?

Отправьте все файлы изображений из node.js во внешний интерфейс

Я могу найти одно слово, но не другое, как это может быть?

Запуск файла `PHP` с использованием JS

Обновить страницу при нажатии кнопки «Назад» (мобильный, сафари)

Express.js + lint дает ошибку

Следующий код с генераторами блокирует BrowserSync

Изменить входное значение с атрибутом в javascript

Ответы 3

Другие вопросы по теме

Похожие вопросы