Как сделать так, чтобы форма обновляла текст в основной форме, используя vanilla javascript?

Question

Я пытаюсь использовать обновление текста в H1 с чьим-либо именем. Я использую конструктор классов. Я попытался использовать document.forms["myform"]["inputbox"].value; для доступа к тексту над формой. Как заставить форму обновить текст обновления?

     var formInput = document.forms["myform"]["inputbox"].value;
     var output = document.getElementById("upDateText");
     class Message {
      constructor(name, style, alignment, type) {
        this.name = formInput;
        this.text = document.innerText = type;
      }
      say() {
        `hi my name is ${this.name}`;
      }
    }
     function text() {
     var counter = 0;
      counter++;
      if (counter == 0) {
        //this creates a new message after send button is clicked
        var myMessage = new Message();
    }

HTML

        <div>
          <h1 id="upDateText">Hi there what is your Name!</h1>
        </div>
        <form id="myform" name="myform" action="" method="GET">
          <input type="text" name="inputbox" id="formInput" />
          <button onclick="text()" id="button">
            send
          </button>
        </form>

Answer 1

Поскольку вы используете form, вы можете использовать его удивительные качества. Forms содержит ссылку на каждый элемент input, textarea или select, который находится в нем. Это также означает, что вы можете получить доступ ко всем значениям этих элементов через form.

Вместо прослушивания щелчка, прослушайте submit. Обычно форма отправляет ваши данные в конечную точку, но вы можете перезаписать это с помощью JavaScript, используя Event.preventDefault().

При отправке формы вы можете использовать FormData API для извлечения всех значений name и value из всех элементов input (и других) в форме.

В вашем class вы делаете забавную вещь, определяя параметры в constructor, но никогда их не используют. Или используйте их или удалите их. То же самое касается ссылки на formInput внутри конструктора. Если formInput не определен, ваш код завершится ошибкой.

Ваш метод say просто содержит строку. Это приведет к ошибке. Либо присвойте строку переменной, например let sentence = `hi my name is ${this.name}`;, либо верните ее.

Посмотрите на приведенный ниже пример, чтобы увидеть, как все происходит вместе. Дайте мне знать, если у вас есть какие-либо вопросы или если я был неясен.

const output = document.getElementById("upDateText");
const form = document.getElementById('myform');

class Message {
  constructor(name) {
    this.name = name;
  }
  say() {
    return `hi my name is ${this.name}`;
  }
}

form.addEventListener('submit', function(event) {
  const formData = new FormData(event.target);
  const name = formData.get('inputbox');
  const message = new Message(name);
  const sentence = message.say();
  output.textContent = sentence;
  event.preventDefault();
});

<div>
  <h1 id="upDateText">Hi there what is your Name!</h1>
</div>
<form id="myform" name="myform" action="" method="GET">
  <input type="text" name="inputbox" id="formInput" />
  <button id="button">send</button>
</form>

Если FormData API трудно набрать asp, то вы всегда можете сделать его немного проще, хотя и менее динамичным c. В приемнике submit получите value от элемента formInput и используйте его для создания экземпляра Message.

const output = document.getElementById("upDateText");
const formInput = document.getElementById('formInput');
const form = document.getElementById('myform');

class Message {
  constructor(name) {
    this.name = name;
  }
  say() {
    return `hi my name is ${this.name}`;
  }
}

form.addEventListener('submit', function(event) {
  const name = formInput.value;
  const message = new Message(name);
  const sentence = message.say();
  output.textContent = sentence;
  event.preventDefault();
});

<div>
  <h1 id="upDateText">Hi there what is your Name!</h1>
</div>
<form id="myform" name="myform" action="" method="GET">
  <input type="text" name="inputbox" id="formInput" />
  <button id="button">send</button>
</form>