Показать текстовое поле для комментариев, если выбрано что-либо ниже 3 по шкале Ликерта 1-5

Question

Я пытаюсь создать опрос с параметром 1-5. Я хочу, чтобы javascript показывал текстовое поле для комментариев, если пользователь выбрал значение 1-3. Может ли кто-нибудь помочь мне с кодом javascript сделать это?

Вот мой код:

<li>
  <span class="survey-question">How would you rate your experience with online shopping?</span>
  <div class="survey-answer">
    <label>
          <input class="radio-button" type="radio" name="required" value="1"> Horrible
        </label>
    <label>
        <input class="radio-button" type="radio" name="required" value="2"> Bad
        </label>
    <label>
          <input class="radio-button" type="radio" name="required" value="3"> So-So
        </label>
    <label>
          <input class="radio-button" type="radio" name="required" value="4"> Great
        </label>
    <label>
          <input class="radio-button" type="radio" name="required" value="5" checked> Awesome!
        </label>
  </div>


  <!-- If an answer <= "So-So or less", display: -->
  <div id="improvement" class="new">
    <span class="survey-question">How can we improve?</span>
    <textarea class="col-md-10" rows="3" id="answer" placeholder="Comments..."></textarea>
  </div>
</li>

Answer 1

Используйте событие onchange onchange="getRating(this)", чтобы перехватить выбор с радиовходов и получить из него значение. Если значение равно 1, 2 или 3, появится раздел улучшения:

var feedbackElem = document.getElementById("improvement")
if (el.value == 3 || el.value == 2 || el.value == 1) { 
  //display improvement}
else { 
  //hide it 
}

function init() {
  var feedbackElem = document.getElementById("improvement")
  feedbackElem.style.display = "none"
}

init ();

function getRating(el) {
  var feedbackElem = document.getElementById("improvement")
  if (el.value == 3 || el.value == 2 || el.value == 1) {
    feedbackElem.style.display = "block"
  } else {
    feedbackElem.style.display = "none"
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <span class="survey-question">How would you rate your experience with online shopping?</span>

  <div class="survey-answer">
    <label> 
      <input class="radio-button" type="radio" name="required" value="1" onchange="getRating(this)"> Horrible </label>

    <label> 
      <input class="radio-button" type="radio" name="required" value="2"onchange="getRating(this)"> Bad  </label>

    <label> 
      <input class="radio-button" type="radio" name="required" value="3"onchange="getRating(this)"> So-So  </label>

    <label> 
      <input class="radio-button" type="radio" name="required" value="4"onchange="getRating(this)"> Great </label>

    <label>
    <input class="radio-button" type="radio" name="required" value="5" checked  checkedonchange="getRating(this)"> Awesome! </label>

  </div>


  <!-- If an answer <= "So-So or less", display: -->
  <div id="improvement" class="new">
    <span class="survey-question">How can we improve?</span>
    <textarea class="col-md-10" rows="3" id="answer" placeholder="Comments..."></textarea>
  </div>

</li>

Answer 2

Просто нужно подключить слушателя изменений, а затем показать скрыть в зависимости от вашего состояния (я включил JQuery просто для простоты, но вы могли бы использовать ваниль, без проблем):

На основании ваших комментариев, Я обновил фрагмент кода для обработки нескольких вопросов. Мне пришлось удалить поле «id», чтобы у вас не было дубликатов идентификаторов, и я нацелил текстовое поле через класс «.new» - хотя это работает для примера, это немного жестко с использованием .parent (). Parent () - но этого достаточно, чтобы помочь вам. Кроме того, необходимо присвоить полю «имя» переключателей другой идентификатор для каждой группы.

$(".new").hide();
$("input").on("change",handleChange);
function handleChange(e){
    var rating = $(e.currentTarget).val();
    var $_textBox = $(e.currentTarget).parent().parent().next(".new");
    if(rating < 4 && $_textBox){
        $_textBox.show();
    }else{
        $_textBox.hide();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <span class="survey-question">QUESTION 1: How would you rate your experience with online shopping?</span>
  <div class="survey-answer">
    <label>
          <input class="radio-button" type="radio" name="required" value="1"> Horrible
        </label>
    <label>
        <input class="radio-button" type="radio" name="required" value="2"> Bad
        </label>
    <label>
          <input class="radio-button" type="radio" name="required" value="3"> So-So
        </label>
    <label>
          <input class="radio-button" type="radio" name="required" value="4"> Great
        </label>
    <label>
          <input class="radio-button" type="radio" name="required" value="5" checked> Awesome!
        </label>
  </div>


  <!-- If an answer <= "So-So or less", display: -->
  <div class="new">
    <span class="survey-question">How can we improve?</span>
    <textarea class="col-md-10" rows="3" id="answer" placeholder="Comments..."></textarea>
  </div>
</li>
<br>
<li>
  <span class="survey-question">QUESTION 2: How would you rate your experience with online shopping?</span>
  <div class="survey-answer">
    <label>
          <input class="radio-button" type="radio" name="required2" value="1"> Horrible
        </label>
    <label>
        <input class="radio-button" type="radio" name="required2" value="2"> Bad
        </label>
    <label>
          <input class="radio-button" type="radio" name="required2" value="3"> So-So
        </label>
    <label>
          <input class="radio-button" type="radio" name="required2" value="4"> Great
        </label>
    <label>
          <input class="radio-button" type="radio" name="required2" value="5" checked> Awesome!
        </label>
  </div>


  <!-- If an answer <= "So-So or less", display: -->
  <div class="new">
    <span class="survey-question">How can we improve?</span>
    <textarea class="col-md-10" rows="3" id="answer" placeholder="Comments..."></textarea>
  </div>
</li>