Я пробую делать таблицу умножения с javascript, но не способен это делать.
То, что я хочу сделать, состоит в том, чтобы не исчез html, и показывает мне полную таблицу.
У меня есть этот код, чтобы это показывать, но как это очевидно, меня удаляет контент html:
document.write();
Я попытался с одним, но он показывает мне единственный результат и не полную таблицу:
document.getElementById();
Здесь они смогут видеть полный код:
function multi() {
num = document.getElementById("num").value;
num = parseInt(num);
for (var i = 1; i <= 10; i++) {
multi = num * i;
document.write(num + "x" + i + "=" + multi + "<br>");
}
}
<!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>Document</title>
</head>
<body>
<label for="num">Introduce un número: </label>
<input type="text" name="" id="num">
<button onclick="multi()">MULTIPLICACIÓN</button>
<p id="multi"></p>
<script src="main.js"></script>
</body>
</html>
Ты можешь делать это таким образом:
id
(asГ - ты поддерживаешь более чистым твой HTML) document.write
, в Вашем месте используй innerHTML
для того, чтобы посредством id этикетки твоего HTML ты распределил ему контент, в этом случае смоги быть в один div
и asГ - ты поддерживаешь весь твой документ затрагивая только контент этикетки +=
, чтобы хранить стоимость каждый multiplicaciГіn дериват использования for
, и который он показывал бы тебе каждый renglГіn вместо Гєltimo for
внутри события click
, которое освобождается, когда пользователь нажимает botГіn на +
, используй синтаксис сдержись strings , чтобы иметь более укороченный и читабельный синтаксис ${numero.value * i}
numero.value
- доступ переменной к стоимости неудара в лунку, где пользователь пишет nГєmero, чтобы производить таблицу умножения i
, - iterador цикла for
CГіdigo
<!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>Document</title>
</head>
<body>
<label for="num">Introduce un número: </label>
<input type="text" name="" id="num" />
<button id="genera">MULTIPLICACIÓN</button>
<div id="multi"></div>
<script>
let genera = document.getElementById("genera")
let numero = document.getElementById("num")
let lienzo = document.getElementById("multi")
genera.addEventListener("click", () => {
for(let i = 1; i<=10; i++) {
lienzo.innerHTML += `${numero.value} * ${i} = ${numero.value*i} <br />`
}
})
</script>
</body>
</html>
То, что он перемещает, что, когда ты используешь document.write () sobreescribe начальный HTML-контент. Подходящее serГ, - в который ты повторил результаты таблицы умножения прилагая это в единственной цепи и после этого введи это внутри установленного заранее элемента:
const inputNum = document.getElementById("num")
const tablaMulti = document.getElementById("tabla-multi")
function multi() {
const numero = parseInt(inputNum.value)
let template = ''
for (let i = 1; i <= 10; i++) {
template += numero + "x" + i + "=" + numero * i + "<br>"
}
tablaMulti.innerHTML = template
}
<label for="num">Introduce un número: </label>
<input type="number" name="" id="num">
<button onclick="multi()">MULTIPLICACIÓN</button>
<div id="tabla-multi"></div>