Найти ввод формы без jquery

Question

Привет, я хочу получить строку из формы. Я новичок в JavaScript. В console.log (значение) значение является значением. Зачем? Я хочу, чтобы это было значение от моя форма Спасибо! :)

let value = document.getElementById("password").value;
console.log(value);

<form>
  <input type="text" name="password" value="" id="password" />
</form>

Answer 1

Вы можете попробовать поиграть с этим, чтобы получить строку при ее изменении:

<form>
  <input type="text" name="password" value="" id="password" />
</form>
<div id="result"></div>

// Here myString is declared outside event listener so it can be used to store data.
let myString = "";

// This will be executed only on input changes.
document.getElementById("password").addEventListener('input', (event) => {
  // Store string value
  myString  = event.srcElement.value;

  // this will log string value
  console.log(myString);
  // or
  logPassword();

  // output value in another html tag
  document.getElementById("result").innerHTML = myString;
});

// This will log empty string because myString = ""
// This code is executed at start like it is
console.log(myString);

// An example of function that can be create to access myString
function logPassword() {
  console.log(myString);
}

Событие ввода Mozilla

РЕДАКТИРОВАТЬ : Решение с помощью кнопки

Примечание: вам не нужен тег формы, если вы не отправляете что-либо.

• Решение 1:

<form>
  <input type="text" name="password" value="" id="password" />
  <!-- Pass the input password value to the write function -->
  <button onclick="writeText(document.getElemenById('password').value)" id="bocken">ok.</button>
</form>
<div id="result"></div>

// Pass the string (submitted password) 
function writeText(myString){
  document.getElementById("result").innerHTML = myString;
}

Для лучшего использования JavaScript при ожидании готовности DOM

// All code inside will be executed only when the page is loaded and ready to use.
document.addEventListener("DOMContentLoaded", function(event) { 
  // do work 
  function writeText(myString){
    document.getElementById("result").innerHTML = myString;
  }
});

• Решение 2:

<input type="text" name="password" value="" id="password" />
<button id="bocken">ok.</button>
</form>
<div id="result"></div>

// All code inside will be executed only when the page is loaded and ready to use.
document.addEventListener("DOMContentLoaded", function(event) { 
  // This will be executed only on button click event.
  document.getElementById("bocken").addEventListener('click', (event) => {
    // output value in another html tag
    document.getElementById("result").innerHTML = document.getElemenById('password').value;
  });
});