Когда забрали фокус с поля – его значение считывается, над полем создается `span`, в котором должен быть выведен текст Не получаться с генир div

Рейтинг: 0Ответов: 1Опубликовано: 14.02.2023

window.addEventListener("DOMContentLoaded", () => {
  const input = document.createElement("INPUT")
  input.setAttribute("type", "number")
  input.setAttribute("placeholder", " Price")
  document.body.appendChild(input)
  input.classList.add("border")
  input.classList.add("input")
  input.addEventListener("focus", () => {
    input.classList.add("green")
  })
  input.addEventListener("blur", () => {
    input.classList.remove("green")
  })
  window.addEventListener('click', e => {
    const span = document.createElement("span")
    const input = document.querySelector(".input").value
    document.getElementById('str').innerHTML = "Вы ввели: " + value
  })
})
</head>

<body>
  <form data-id="task1">
    <p><input type="text" data-length="5" placeholder="value 5"></p>
    <p><input type="text" data-length="7" placeholder="value 7"></p>
    <button id="btn">clear</button>
    <hr>
  </form>



</body>

</html>

javascript
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Предложу такой вариант...

window.addEventListener("DOMContentLoaded", () => {
  const input = document.createElement("INPUT")
  input.setAttribute("type", "number")
  input.setAttribute("placeholder", " Price")
  const span = document.createElement("span")
  span.classList.add("info")
  document.body.appendChild(span)
  document.body.appendChild(input)
  input.classList.add("border")
  input.classList.add("input")
  input.addEventListener("focus", () => {
    input.classList.add("green")
  })
  input.addEventListener("blur", () => {
    value = input.value
    span.textContent = "Вы ввели: " + value
    input.classList.remove("green")
  })
})
.green {
  outline-color: green;
}

.info {
  display: block;
}
</head>

<body>
  <form data-id="task1">
    <p><input type="text" data-length="5" placeholder="value 5"></p>
    <p><input type="text" data-length="7" placeholder="value 7"></p>
    <button id="btn">clear</button>
    <hr>
  </form>



</body>

</html>