用户单击按钮时创建文本区域

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

您可以通过以下几种方法为用户提供一些输入文字的内容，然后根据需要进行处理。

第一种方法是插入7864525885 3055276596 7868887478 7035980427 Name: Mobile, Length: 167, dtype: object 元素并添加回调，以便当用户选择“确定”时，您可以对文本进行所需的操作。

第二种方法是使用textarea，如其他注释中所述

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}`);
});

Answer 2

我认为您可以创建一个<textarea id="whatever_you_want" hidden>，然后添加else document.getElementById("whatever_you_want").removeAttribute("hidden")

Answer 3

内置警报功能无法用于获取用户输入。

您可以添加一个隐藏的div来代替警报，还可以在其中添加HTML元素。

请找到经过稍微修改的代码版本，以获取以下提示：

     <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>
<div id="result" style="display:none"></div>


<script>
    let button = document.querySelector("input.button");

button.addEventListener("click", question1);


function question1() {
  var selection = document.querySelector("input[name='groupOfDefaultRadios']:checked");
  var result = document.getElementById("result");
   if (selection.value == 'yes') {
    result.innerHTML = "Thank you for your kindness";
    result.style.display = "block";
  } else {
    var output = "";
    output += "We are sorry! Please write to us telling us what was wrong:<br />";
    output += "<textarea style='width: 100px; height 100px;'></textarea><br />";
    output += "<button>Submit</button>";
    result.innerHTML = output;
    result.style.display = "block";
    
  }
}

</script>

Answer 4

我想您可以创建一个：

<input type="hidden" name="message" id="myAwesomeHiddenMessageField">

在您的表单中，并通过显示如下问题的提示替换第二个警报：

let promptMessage = prompt("We are sorry! Please write to us telling us what was wrong");

提交后或其他任何情况下

document.querySelector('#myAwesomeHiddenMessageField').val(promptMessage);

或者，当选择“否”时，也可以使用document.createElement将textearea附加到表单中。但是，我很乐意为您提供更多帮助。如果您不想这样做，那么如果用户最后选择“是”，则必须隐藏生成的文本区域。不知道这是否是最好的用户体验选择。

干杯。

Answer 5

您可以根据单选按钮的选择切换隐藏的文本字段。

在下面的示例中，将一个类添加到文本字段以将其隐藏。当选择更改为“是”时，将添加该类；如果将其更改为“ no”，则重新添加该类。

let submitButton = document.querySelector('input.button');
let radioButtons = document.querySelectorAll('input[type="radio"]');
let hiddenTextArea = document.querySelector('.custom-textarea textarea');

// Add listeners
Array.from(radioButtons).forEach(radio => {
  radio.addEventListener('change', (e) => {
    let hiddenWrapper = hiddenTextArea.parentElement;
    hiddenWrapper.classList.toggle('hidden-field', e.target.value !== 'no');
  });
});

submitButton.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");
  }
}

.hidden-field {
  display: none;
}

<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>
    
    <!-- Here -->
    <div class="custom-control custom-textarea hidden-field">
      <textarea name="feedback"></textarea>
    </div>
    
    <input class="button" type="button" name="groupOfDefaultRadios" value="Submit">
  </form>
</div>

Answer 6

另一种方法是在用户标记为“否”时创建createElement。我在这个一般演示中放了笔记：

let radioI = document.querySelectorAll("input[name='groupOfDefaultRadios']"); // get radio in order to attach eventListener:
radioI.forEach((item) => { item.addEventListener("change", question1)}); // add change event that will trigger this function:
function question1() {
  var selection = document.querySelector('input[name="groupOfDefaultRadios"]:checked'); // this is your lines
   if (selection.value == 'yes') {
    alert('Thank you for your kindness');
// and/or submit the form progrematically using submit() etc... and/or redirect the user etc..
  } else {
    // create textarea element and display the submit button:
    var textA = document.createElement('textarea');
    textA.setAttribute('name', 'notHelpNote');
    textA.setAttribute('required', 'true');
    textA.placeholder = 'We are sorry! Please write to us telling us what was wrong';
    document.querySelector('#myForm').appendChild(textA);
    document.querySelector('#myForm input[type="submit"]').style.display = 'block';
  }
}

<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="submit" name="groupOfDefaultRadios" value="Submit" style="display: none;">
  </form>
</div>