Как добавить текст в элемент ввода?
Я пытаюсь добавить текст в элемент ввода с помощью кнопки. До сих пор я пытался изменить .textContent, который действительно изменяет textContent, но это не отображается в поле изображения. Настройка .value не работает.
Мой код:
const buttons = document.querySelectorAll(".row button");
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
document.querySelector("input").value += buttons[i].value;
})
}
Каждое решение, которое я читал в Интернете, просто предлагает изменить .value элемента ввода, что не работает для меня, поэтому я в недоумении.
Обновлено: Спасибо всем, такую глупость упускать из виду.
Пожалуйста, предоставьте HTML, который сопровождает это. Желательно как минимально воспроизводимый пример. Какой текст вы хотите добавить?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Изменение свойства value должно работать на вас. Ваша проблема заключается в этом утверждении:
value += buttons[i].value
Кнопки не имеют значения, если вы не укажете его. Доступ к внутреннему тексту кнопки осуществляется с помощью свойств innerHTML или innerText, а не свойства value:
const button = document.querySelector("button");
const input = document.querySelector("input");
button.addEventListener("click", (e) => {
input.value += button.innerText;
});<input type = "text" />
<button type = "button">bleh</button>С кнопками свойство value используется для отправки формы PHP, а не для хранения текстовых данных.
Это не будет работать, если есть несколько кнопок. Не используйте толстые стрелочные функции для слушателей событий
^ это очень верно, имейте это в виду, ОП. Я просто делал быструю демонстрацию и использовал функцию стрелки; однако на практике их не следует использовать для прослушивателей событий.
Вы пытаетесь установить значение для поля ввода на основе отображаемого текста кнопки?
Если это так, вы можете попытаться заменить кнопки [i].value на кнопки [i].textContent
Вы можете использовать button.innerHTML для назначения входного значения
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
<meta http-equiv = "X-UA-Compatible" content = "ie=edge" />
<title>Static Template</title>
</head>
<body>
<input type = "text" value = "" />
<button>1</button>
<button>2</button>
<script>
const buttons = document.querySelectorAll("button");
const input = document.querySelector("input");
buttons.forEach((button) => {
button.addEventListener("click", function () {
input.value += button.innerHTML;
});
});
</script>
</body>
</html>
элемент ввода хорош, но элементы кнопок не могут иметь атрибута значения, поэтому добавить нечего...