Question

我正致力于简单HTML表单的交互性。

具体来说，工作角色有一个下拉选择框。如果＆＃39;其他＆＃39;如果选中，则会出现一个文本字段，要求用户更具体。

我是初学者，想要在没有jQuery的情况下这样做。

以下是我正在使用的HTML代码段：

<fieldset class="basic">         
        <legend>Basic Info</legend>

        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name">

        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user_email">

        <label>Job Role</label>
        <select id="title" name="user_title">
          <option value="full-stack js developer">Full Stack JavaScript Developer</option>
          <option value="front-end developer">Front End Developer</option>
          <option value="back-end developer">Back End Developer</option>
          <option value="designer">Designer</option>          
          <option value="student">Student</option>
          <option value="other">Other</option>  
        </select>           
      </fieldset>

我的直觉告诉我首先构建文本字段并添加它的属性。

然后，我将使用if条件来测试所选选项是否为＆＃39;其他＆＃39;。如果是，则我将新创建的文本字段附加到页面。

到目前为止，这还没有奏效。为了尝试调试这个，我尝试使用控制台记录我正在尝试使用的元素。我不认为我理解它是如何工作的，因为它打印出来的未定义的＆＃39;和＆＃39; null＆＃39;。

这是我的JS：

//任务：为表单添加交互性

'use strict';

// Hold DOM elements for easy access
var pageBody = document.querySelector('body');
var jobRoleSelect = document.getElementById('title');
console.log(jobSelected);
var jobSelected = jobRoleSelect.options[jobRoleSelect.selectedIndex].value;
var basicSection = document.querySelector('basic');
console.log(basicSection);


// Job Role section of the form. Reveal a text field when the "Other" option is selected from the "Job Role" drop down menu
if(jobSelected === 'other') {
    var otherText = document.createElement('input');
    // Add an text input field. Use the id of "other-title" 
    otherText.setAttribute('id', 'other-title');
    otherText.setAttribute('type', 'text');
    otherText.setAttribute('name', 'other_field');
    otherText.setAttribute('placeholder', 'Your Title');

    var otherLabel = document.createElement('label');
    otherLabel.setAttribute('for', 'other_field');
    otherLabel.innerHTML = 'other';

    basicSelection.appendChild(otherLabel);
    basicSelection.appendChild(otherText);
}

Answer 1

您需要设置一个事件监听器来监听＆＃34;更改＆＃34;用户从下拉菜单中进行选择时触发的事件。你也在引用＆＃34; basicSelection＆＃34;而不是＆＃34; basicSection＆＃34;在你的if语句中。

＆＃13;

'use strict';

var jobRoleSelect = document.getElementById('title');
var basicSection = document.getElementsByClassName('basic')[0];

document.getElementById("title").addEventListener("change", function(){
  var jobSelected = jobRoleSelect.options[jobRoleSelect.selectedIndex].value;
  console.log(jobSelected);
  
  if(jobSelected === 'other') {
    var otherText = document.createElement('input');
    // Add an text input field. Use the id of "other-title" 
    
    otherText.setAttribute('id', 'other-title');
    otherText.setAttribute('type', 'text');
    otherText.setAttribute('name', 'other_field');
    otherText.setAttribute('placeholder', 'Your Title');
    
    var otherLabel = document.createElement('label');
    otherLabel.setAttribute('for', 'other_field');
    otherLabel.innerHTML = 'Other:';

    basicSection.appendChild(otherLabel);
    basicSection.appendChild(otherText);
  }
});

＆＃13;

<fieldset class="basic">         
        <legend>Basic Info</legend>

        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name">

        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user_email">

        <label>Job Role</label>
        <select id="title" name="user_title">
          <option value="full-stack js developer">Full Stack JavaScript Developer</option>
          <option value="front-end developer">Front End Developer</option>
          <option value="back-end developer">Back End Developer</option>
          <option value="designer">Designer</option>          
          <option value="student">Student</option>
          <option value="other">Other</option>  
        </select>           
      </fieldset>

＆＃13;

Answer 2

如果您显示的JS包含在文档正文的末尾，那么当页面首次加载时，它将运行一次。我假设您真正想要的是让它运行以响应用户更改所选内容，在这种情况下，您需要将代码包装在函数中并使其成为change事件的事件处理程序。 p>

var jobRoleSelect = document.getElementById('title');
jobRoleSelect.addEventListener('change', function() {
  // your other code here
});

另请注意您需要允许用户将选择更改为“其他”，然后将其更改回其他内容，然后再将其更改为“其他”，即您的功能如果当前选择不需要，则需要能够删除文本输入。

但我认为在html中包含文本元素和标签并隐藏并根据需要显示它会更简单：

   var jobRoleSelect = document.getElementById('title');

jobRoleSelect.addEventListener('click', function() {
  var otherSelected = jobRoleSelect.value === 'other';
  var otherElements = document.querySelectorAll('.other');

  for (var i = 0; i < otherElements.length; i++) {
    if (otherSelected)
      otherElements[i].classList.remove('hidden');
    else
      otherElements[i].classList.add('hidden');
  }
});

label {
  display: block;
}
.hidden {
  display: none;
}

<fieldset class="basic">
  <legend>Basic Info</legend>

  <label for="name">Name:</label>
  <input type="text" id="name" name="user_name">

  <label for="mail">Email:</label>
  <input type="email" id="mail" name="user_email">

  <label>Job Role</label>
  <select id="title" name="user_title">
    <option value="full-stack js developer">Full Stack JavaScript Developer</option>
    <option value="front-end developer">Front End Developer</option>
    <option value="back-end developer">Back End Developer</option>
    <option value="designer">Designer</option>
    <option value="student">Student</option>
    <option value="other">Other</option>
  </select>
  <label class="other hidden" for="other-title">Other</label>
  <input class="other hidden" type="text" id="other-title" name="other-field" placeholder='Your title'>
</fieldset>

我已经给出了所有（两者都是）需要隐藏或显示other类的元素，这意味着我的代码必须遍历它们。您可以将它们包装在div中，然后隐藏div。

请注意，我已经通过类完成了隐藏/显示，我通过元素'.classList添加或删除。很遗憾，IE＆lt; = 9不支持.classList，但有a polyfill，或者您可以直接设置style.display或其他任何内容。

Answer 3

您的代码中有很多错误。但我已经把它们搞清楚了，并提出了解决方案。使用此

<fieldset class="basic">         
        <legend>Basic Info</legend>

        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name">

        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user_email">

        <label>Job Role</label>
        <select id="title" name="user_title">
          <option value="full-stack js developer">Full Stack JavaScript Developer</option>
          <option value="front-end developer">Front End Developer</option>
          <option value="back-end developer">Back End Developer</option>
          <option value="designer">Designer</option>          
          <option value="student">Student</option>
          <option value="other">Other</option>  
        </select>           
      </fieldset>
      <script>
'use strict';

// Hold DOM elements for easy access
var pageBody = document.querySelector('body');
var jobRoleSelect = document.getElementById('title');
//console.log(jobSelected);
var basicSelection = document.querySelector('.basic');
//console.log(basicSection);

jobRoleSelect.onchange = function(){
    var jobSelected = jobRoleSelect.options[jobRoleSelect.selectedIndex].value;
// Job Role section of the form. Reveal a text field when the "Other" option is selected from the "Job Role" drop down menu
if(jobSelected == 'other') {
    console.log('nice');
    var otherText = document.createElement('input');
    // Add an text input field. Use the id of "other-title" 
    otherText.setAttribute('id', 'other-title');
    otherText.setAttribute('type', 'text');
    otherText.setAttribute('name', 'other_field');
    otherText.setAttribute('placeholder', 'Your Title');

    var otherLabel = document.createElement('label');
    otherLabel.setAttribute('for', 'other_field');
    otherLabel.innerHTML = 'other';

    basicSelection.appendChild(otherLabel);
    basicSelection.appendChild(otherText);
}
}
</script>

这是一部作品jsFiddle

为什么我的文本字段没有添加到页面中？

3 个答案: