Вопросы Теги

Таблица умножения с языком сценариев JavaScript

Я пробую делать таблицу умножения с 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>
3
задан 24.12.2019, 01:57
2 ответа

Ты можешь делать это таким образом:

  • ObtГ©n так botГіn, который он призывает в нее funciГіn как место, где ты планируешь показать таблицу умножения в travГ©s Ваших id (asГ - ты поддерживаешь более чистым твой HTML)
  • , не используй document.write, в Вашем месте используй innerHTML для того, чтобы посредством id этикетки твоего HTML ты распределил ему контент, в этом случае смоги быть в один div и asГ - ты поддерживаешь весь твой документ затрагивая только контент этикетки
  • , Когда estГ©s распределяя стоимость он использует +=, чтобы хранить стоимость каждый multiplicaciГіn дериват использования for, и который он показывал бы тебе каждый renglГіn вместо Гєltimo
  • , Произведи цикл for внутри события click, которое освобождается, когда пользователь нажимает botГіn на
  • Вместо того, чтобы прилагать с sГ-mbolo +, используй синтаксис сдержись strings , чтобы иметь более укороченный и читабельный синтаксис
    • Для этой точки, если тебе нужно, чтобы была обработана она operaciГіn matemГЎtica; тогда escrГ-belo таким образом: ${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>
3
ответ дан 24.12.2019, 21:45

То, что он перемещает, что, когда ты используешь 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>
2
ответ дан 24.12.2019, 21:45

Теги

Похожие вопросы