Как я могу сделать кнопки с цифрами от 0 до 9, которые добавляются в текстовое поле, когда я их нажимаю
Я хочу сделать «цифровую клавиатуру», которая показывает кнопки с символами от 0 до 9. Когда я нажимаю каждую кнопку, она должна складываться. Итак, скажем, я нажимаю 3, 4, затем 1, это должно сказать 341 в текстовом поле или числовом поле idk (извините, я новенький).
Я взял только несколько примеров от своего учителя, поэтому я не знаю, правильный ли это метод.
Я попробовал это на кнопке 0:
<button onclick = "showZero()">0</button>
<button onclick = "">1</button>
<button onclick = "">2</button>
<button onclick = "">3</button>
<button onclick = "">4</button>
<button onclick = "">5</button>
<button onclick = "">6</button>
<button onclick = "">7</button>
<button onclick = "">8</button>
<button onclick = "">9</button>
<br>
<input type = "text" id = "txtZero">
window.onload = start;
function start() {}
function showZero()
{
var zero = document.getElementById("Number");
zero.Value = "0";
document.querySelector("txtZero").appendChild(zero);
}
Я использую неправильный метод? Я видел пример моего учителя, но он использовал его для создания большего количества кнопок, а не чисел, как я пытался сделать.
Эта ссылка поможет вам codeburst.io/…
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Обновлено: я отредактировал свой ответ, чтобы предоставить лучший ответ, который не использует встроенную обработку событий. Я также завернул код в прослушиватель событий DOMContentLoaded, чтобы убедиться, что JS запускается после полной загрузки DOM.
function ready() {
// The textfield element
textField = document.getElementById("field")
// The reset button
resetButton = document.getElementById("resetbtn")
// Get all the buttons to an Array
buttons = document.getElementsByClassName("btn")
// Add click event listener to all button elements and insert their inner text as value to the text field
Array.prototype.forEach.call (buttons, (button) => {
button.addEventListener("click", () => {
textField.value += button.innerText
})
})
// Add click event listener to reset button
resetButton.addEventListener("click", () => {
textField.value = null
})
}
document.addEventListener("DOMContentLoaded", ready);input, button {
padding: 3px 6px;
margin: 3px;
}<button class = "btn">0</button>
<button class = "btn">1</button>
<button class = "btn">2</button>
<button class = "btn">3</button>
<button class = "btn">4</button>
<button class = "btn">5</button>
<button class = "btn">6</button>
<button class = "btn">7</button>
<button class = "btn">8</button>
<button class = "btn">9</button>
<br>
<input type = "text" id = "field"><button id = "resetbtn">Reset</button>Не поощряйте встроенную обработку событий. Они опасны и не работают, когда есть Content-Security-Policy.
что делает встроенная обработка событий? это значит поместить javascript в html файл? извини я новенький
@Achu Я только что дал быстрый ответ на то, что вы пытались сделать. Встроенная обработка событий — это атрибут onclick, о котором упоминал ControlAltDel. На самом деле вы можете дать имена классов или идентификаторы каждой кнопке, а затем добавить обработчики событий Click в свой файл javascript.
@Ozgur Sar также += означает, что он добавит? это то, что я имел в виду, да
Да, он просто добавляет новую строку к существующему значению текстового поля.
@Achu Я отредактировал свой ответ, чтобы удалить встроенную обработку событий, о которой ControlAltDel упомянул выше.
@OzgurSar Хорошо, я посмотрю на это
Следуйте коду к нему:
- Добавьте функцию setNumber для установки числа в тексте поля.
- Измените функцию showZero на resetNumber, если она содержит значение в текстовом поле, вставьте ноль.
function resetNumber()
{
document.getElementById("field").value = '0';
}
function setNumber(number) {
document.getElementById("field").value = document.getElementById("field").value === '0' ? '' : document.getElementById("field").value += number;
}<html>
<body>
<button onclick = "resetNumber()">Reset</button>
<button onclick = "setNumber(0)">0</button>
<button onclick = "setNumber(1)">1</button>
<button onclick = "setNumber(2)">2</button>
<button onclick = "setNumber(3)">3</button>
<button onclick = "setNumber(4)">4</button>
<button onclick = "setNumber(5)">5</button>
<button onclick = "setNumber(6)">6</button>
<button onclick = "setNumber(7)">7</button>
<button onclick = "setNumber(8)">8</button>
<button onclick = "setNumber(9)">9</button>
<br />
<input type = "text" id = "field" />
</body>
</html>Редактировать со встроенными событиями.
Добавьте также функцию resetNumber.
да, но удалите "onclick" и вместо этого используйте addEventListener
Вы должны использовать одну и ту же функцию для всех кнопок и передавать ей значение. Кроме того, вам не нужно ничего запускать при загрузке страницы — просто инициализируйте глобальную переменную, содержащую ваше начальное значение. Я предлагаю вам записать предполагаемое поведение в виде псевдокода, чтобы у вас была ясная логика, которую вы ищете.