я пытаюсь использовать литералы шаблона для отображения текста из JavaScript в HTML, но элементы не определены, что мне делать? - PullRequest
Новая
       22

я пытаюсь использовать литералы шаблона для отображения текста из JavaScript в HTML, но элементы не определены, что мне делать?

0 голосов
/ 26 апреля 2018

Я пытаюсь отобразить имя и выбранные элементы формы в div externalText в формате HTML, но они продолжают отображаться как неопределенные. 

here is the Javascript


let ShapeLink = (function(){
//code here!

return {
    initForm: function(frm){
        //code here!
        frm.addEventListener('submit', function(){
          document.getElementById('name').name,
          document.getElementById('shapeSelect').option;
        })
      let display = document.getElementById('outputText').innerHTML = 
  `${this.name} wants to see a ${this.shapeSelect}`;
      console.log(display);
      display.innerHTML =`
        <div id="outputText">
        ${this.name} wants to see a ${this.shapeSelect}
        </div>`

    }
}
})()

и вот HTML 

<body>
<form>
    <label for="name">Name:</label>
    <input type="text" id="name">
    <label for="shapeSelect">Shape:</label>
    <select name="" id="shapeSelect">
        <option value="">pick a shape</option>
        <option value="square">Square</option>
        <option value="circle">Circle</option>
    </select>
    <input type="submit" value="Submit">
</form>
<div id="outputText"></div>
<svg width=100 height=100></svg>
<script>
    ShapeLink.initForm(document.querySelector("form"));
</script>
</body>

обратите внимание, что мне нужно добавить весь код в файл Javascript

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

Замените this внутри литералов шаблона значением переменной. Здесь this будет указывать на form. Также document.getElementById('name').name, даст имя, но вам может понадобиться значение ввода & document.getElementById('shapeSelect').option; need быть замененным document.getElementById('shapeSelect').value;

Форма имеет кнопку отправки, поэтому при нажатии она попытается отправить форму. Поведение формы по умолчанию можно предотвратить с помощью event.preventDefault

let ShapeLink = (function() {
  var _name;
  var _selOption;
  return {
    initForm: function(frm) {
      frm.addEventListener('submit', function(e) {
        e.preventDefault();
        // get the value attribute
        _name = document.getElementById('name').value;
        _selOption = document.getElementById('shapeSelect').value;
        //check if name and selected option is not undefined
        if (_name && _selOption) {
          document.getElementById('outputText').innerHTML = `${_name} wants to see a ${_selOption}`;
        }

      })
    }
  }
}())
ShapeLink.initForm(document.querySelector("form"));
ShapeLink.initForm(document.querySelector("form"));
<form>
  <label for="name">Name:</label>
  <input type="text" id="name">
  <label for="shapeSelect">Shape:</label>
  <select name="" id="shapeSelect">
    <option value="">pick a shape</option>
    <option value="square">Square</option>
    <option value="circle">Circle</option>
  </select>
  <input type="submit" value="Submit">
</form>
<div id="outputText"></div>
<svg width=100 height=100></svg>
0 голосов
/ 26 апреля 2018

Вы должны хранить весь свой JavaScript вместе, и нет необходимости делать вашу основную функцию глобальной. Кроме того, полагаясь на this, вы попадете в мир боли. Поскольку у вас уже есть доступ к форме через frm, вы можете просто получить доступ к ее свойству elements, чтобы получить значения из вашей формы: 

document.addEventListener('DOMContentLoaded', function() {
  const ShapeLink = {
    initForm: function(frm) {
      frm.addEventListener('submit', function(event) {
        event.preventDefault();
        event.stopPropagation();
        let display = document.getElementById('outputText');

        display.innerHTML = `
          <div id="outputText">
            ${frm.elements.name.value} wants to see a ${frm.elements.shapeSelect.value}
          </div>
        `;
      });
    },
  };

  ShapeLink.initForm(document.querySelector('form'));
});
<form>
  <label for="name">Name:</label>
  <input type="text" id="name">
  <label for="shapeSelect">Shape:</label>
  <select name="" id="shapeSelect">
    <option value="">pick a shape</option>
    <option value="square">Square</option>
    <option value="circle">Circle</option>
  </select>
  <input type="submit" value="Submit">
</form>
<div id="outputText"></div>
<svg width=100 height=100></svg>
...