выводить случайные значения из массива переменной

[alrosavilla]

Здравствуйте.
Пытаюсь сделать сайтик обучалку по английскому. На странице текст с пропусками, которые пользователю нужно заполнить. В зависимости от ответа появляются комментарии (верно/не верно). Это сделать получилось.
Но. Хочу чтоб на ответ пользователя появлялись разные комментарии из списка вариантов.
Вот код который сейчас.

function proverit(){
let good_commentArray = ['well done!', correct!', 'good job!'];
let good_rand = Math.floor(Math.random()*good_commentArray.length) ;
let good_comment = good_commentArray[good_rand];
let bad_commentArray = ['incorrect', 'try again', 'wrong'];
let bad_rand = Math.floor(Math.random()*bad_commentArray.length);
let bad_comment = bad_commentArray[bad_rand];
right_answer_1 = "saying";
right_answer_2 = "been";
let right_answer_3 = ["don't", "do not"];
user_answer_1 = document.getElementById('z_1').value;
user_answer_2 = document.getElementById('z_2').value;
user_answer_3 = document.getElementById('z_3').value;
if (user_answer_1.toLowerCase() == right_answer_1.toLowerCase())
{ document.getElementById('result_1').innerHTML = good_comment
document.getElementById("result_1").classList.remo ve("wrong");
document.getElementById("result_1").classList.add( "correct");
}
else {document.getElementById("result_1").innerHTML = bad_comment;
document.getElementById("result_1").classList.add( "wrong");
document.getElementById("result_1").classList.remo ve("correct");
}
if (user_answer_2.toLowerCase() == right_answer_2.toLowerCase())
{ document.getElementById('result_2').innerHTML = good_comment
document.getElementById("result_2").classList.remo ve("wrong");
document.getElementById("result_2").classList.add( "correct");
}
else {document.getElementById('result_2').innerHTML = bad_comment
document.getElementById("result_2").classList.add( "wrong");
document.getElementById("result_2").classList.remo ve("correct");
}
if ((user_answer_3.toLowerCase() == right_answer_3[0].toLowerCase()) || (user_answer_3.toLowerCase() == right_answer_3[1].toLowerCase()))
{ document.getElementById('result_3').innerHTML = good_comment
document.getElementById("result_3").classList.remo ve("wrong");
document.getElementById("result_3").classList.add( "correct");
}
else {document.getElementById('result_3').innerHTML = bad_comment
document.getElementById("result_3").classList.add( "wrong");
document.getElementById("result_3").classList.remo ve("correct");
}

Проблема в том что хоть комментарии и меняются, но у всех полей появляется один и тот же комментарий.
Подскажите, пожалуйста, как можно сделать так, чтоб у каждого поля с ответом пользователя появлялся свой комментарий из списков let good_commentArray и let bad_commentArray?

[voraa]

но у всех полей появляется один и тот же комментарий.

Потому, что вы везде вставляете один и тот же комментарий

document.getElementById('result_1').innerHTML = good_comment
....
 document.getElementById('result_2').innerHTML = good_comment
...
document.getElementById('result_3').innerHTML = good_comment

Надо в этих случаях каждый раз вычислять новый - ставить
good_commentArray[Math.floor(Math.random()*good_commentArray.length)];

Ну или сделать функцию

const goodComment = () => good_commentArray[Math.floor(Math.random()*good_commentArray.length)];

И писать

document.getElementById('result_1').innerHTML = goodСomment();
....
 document.getElementById('result_2').innerHTML = goodСomment();
...
document.getElementById('result_3').innerHTML = goodСomment();

[alrosavilla]

Спасибо! Получилось!
С функцией пока не разобрался, но вставил для каждого коммента отдельный расчет.
У меня еще вопрос остался, но он наверно сложнее.
Если пользователь не менял ничего в ответе, можно ли отключить функцию проверки чтобы комментарии не менялись?

[voraa]

У меня еще вопрос остался, но он наверно сложнее.
Если пользователь не менял ничего в ответе, можно ли отключить функцию проверки чтобы комментарии не менялись?

Трудно точно сказать, не зная, как там все у вас организовано.
Например, если у вас элементы заданы, например, так
<input id="z-1" type="text" value="been">
То можно сравнивать как то так

const z1 = document.getElementById('z_1');
if (z1.value != z1.defaultValue) { // поменялось
   ....
}

Свойство defaultValue содержит то значение, которое было задано в html атрибутом value

[alrosavilla]

Наверно так не получится. Вот как выглядит HTML:

<div class="exercise">
     <p>- God bless you for <input class="exercise_input" type="text" id="z_1"> (say) that. <span id="result_1"></span></p> 
</div>
<button class="check_button" onclick="proverit();">Check</button>

В JS так:

function proverit(){
  let good_commentArray = ['right', 'correct', 'great!'];
  let bad_commentArray = ['wrong', 'try again', 'sorry'];
  right_answer_1 = "saying";
  user_answer_1 = document.getElementById('z_1').value;
    if (user_answer_1.toLowerCase() == '') {
    document.getElementById("result_1").innerHTML = "";
  }  
    else if (user_answer_1.toLowerCase() == right_answer_1.toLowerCase())
      { document.getElementById('result_1').innerHTML = good_commentArray[Math.floor(Math.random()*good_commentArray.length)]
        document.getElementById("result_1").classList.remove("wrong", "tip");
        document.getElementById("result_1").classList.add("correct");
    }
      else {document.getElementById("result_1").innerHTML = bad_commentArray[Math.floor(Math.random()*bad_commentArray.length)];
      document.getElementById("result_1").classList.add("wrong", "tip");
      document.getElementById("result_1").classList.remove("correct");
    }

Наверно это очень примитивно написано, я - не спец, но смысл такой.
Человек видит предложение с пропуском. В него нужно ввести слово и нажать кнопку "проверить". Если ничего не вводит, то ничего не происходит. Если вводит правильно - появляется хороший коммент из списка. Если неправильно, то плохой коммент из списка.

Вопрос в том, что если ввести какой-либо ответ и потом несколько раз кликать на кнопку "проверить", комментарии будут меняться. А хочется сделать так, чтоб кнопка "проверить" не запускала проверку (и соответственно комментарии не менялись бы), пока пользователь не изменит input

[рони]

alrosavilla,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[voraa]

Ну иметь флажки, нужно ли проверять данный инпут, На инпуты повесить обработчики события oninput. при событии устанавливать флажок, что нужна проверка, при проверки сбрасывать этот флажок.
При нажатии кнопки проверять только те инпуты, для которых установлен флажок

[voraa]

Что то типа такого соорудить

<div class="exercise">
<p>- God bless you for <input class="exercise_input" type="text"> (say) that. 
<span class="result"></span>
</p>
......
</div>

<button class="check_button" >Check</button>

<script>
const correctAnswers = ['saying', ....]; // список правильных ответов
const inputs = document.querySelectorAll('input.exercise_input');
const results = document.querySelectorAll('span.result');
const goodCommentArray = ['right', 'correct', 'great!'];
const badCommentArray = ['wrong', 'try again', 'sorry'];


function proverit(){

	inputs.forEach ((input, ni) => {
		const needtest = input.dataset.test ?? ''
		if (needtest) {   // нужно ли проверять?
			const userAnswer = input.value.toLowerCase();
			if (userAnswer === '') {
				results[ni].textContent = '';
                 results[ni].classList.remove('correct', 'wrong', 'tip')
			} else if (userAnswer === correctAnswers[ni]) {
				results[ni].textContent = goodComment();
				results[ni].classList.remove('wrong', 'tip');
				results[ni].classList.add('correct');
			} else {
				results[ni].textContent = badComment();
				results[ni].classList.remove('correct');
				results[ni].classList.add('wrong', 'tip');
			}						
		}
		input.dataset.test = '';
	})
}

inputs.forEach ((input) => {
	input.addEventListener('input', ()=> this.dataset.test = '1') // ставим флаг, что надо проверить
});

document.querySelector('check_button').addEventListener('click', proverit);

</script>

[alrosavilla]

Рони, вроде бы вставил теги. Спасибо.

[alrosavilla]

voraa, спасибо большое за код. Попробую разобраться как с этим работать.
А получается флажки должен будет сам пользователь выставлять? Если так, то ученики обычно ленивые. Хорошо, если сил хватит просто ввести ответы и покликать по кнопке проверить.