javascript - 当用户点击按钮时创建一个文本区域

Question

我想知道处理下一个功能的最佳方法是什么。现在，当用户选择“否”时，会出现一个警告。但是，我希望出现一个文本区域框。关于如何解决这个问题的任何帮助或线索？我的第一个想法是我的 if 语句必须改变，对吗？任何线索表示赞赏。我提供了一个片段供您查看到目前为止的内容。

let button = document.querySelector("input.button");

button.addEventListener("click", question1);

function question1() {
  var selection = document.querySelector("input[name='groupOfDefaultRadios']:checked");

  if (selection.value == 'yes') {
    alert("Thank you for your kindness");
  } else {
    alert("We are sorry! Please write to us telling us what was wrong");
  }
}

<div class="clienthelp-card">
  <form id="myForm">
    <h4> Was this helpful?</h4>
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" id="defaultGroupExample1" name="groupOfDefaultRadios" value="yes">
      <label class="custom-control-label" for="defaultGroupExample1">Yes</label>
    </div>
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" id="defaultGroupExample2" name="groupOfDefaultRadios" value="no">
      <label class="custom-control-label" for="defaultGroupExample2">No</label>
    </div>
    <input class="button" type="button" name="groupOfDefaultRadios" value="Submit">
  </form>
</div>

Answer 1

这里有几种方法可以让用户输入文本，然后按您认为合适的方式处理它。

第一种方法是插入一个 textarea 元素并添加一个回调，这样当用户选择 OK 时，您可以对文本做任何您想做的事情。

第二种方式是使用prompt，如其他评论中所说

function okButtonCallback(evt) {
  const textArea = document.getElementById('textarea1');
  alert(`Text Area Text: ${textArea.value}`);
}

const btnTextArea = document.getElementById('textarea');
const btnPrompt = document.getElementById('prompt');

// Use a Text Area to get text and
// add a callback to handle the text
// when the user selects ok
btnTextArea.addEventListener('click', e => {
  const container = document.getElementById('myContainer');
  const textArea = document.createElement('textarea');
  textArea.id = 'textarea1';
  const okButton = document.createElement('button');
  okButton.innerText = 'OK';
  okButton.onclick = okButtonCallback;
  container.appendChild(textArea);
  container.appendChild(okButton);
});

// Use a prompt to get the text
btnPrompt.addEventListener('click', e => {
  const enteredText = prompt('Some sort of message');
  alert(`Prompt Text: ${enteredText}`);
});

<button id="textarea">Show Text Area</button>
<button id="prompt">Show Prompt</button>

<div id="myContainer"></div>