Создание разрыва между подсказками с помощью Javascript

Question

Так что в основном я пытаюсь сделать так, чтобы веб-страница постоянно запрашивала ввести номер, пока вы не введете -1. Затем он остановит и опубликует таблицы умножения всех предыдущих чисел, которые вы ввели.

Это то, что у меня есть до сих пор, и я действительно не уверен, куда идти отсюда.

<script> 
    var num = prompt("Enter Number", "0") 

    var num = parseInt(num); 
    var i = 0; 

    document.write('<table ="1">'); 
    for (i = 1; i < 13; i++) { 
     document.write("<tr><td>" + num + " x " + i + " = " + num * i + "</td></tr>"); 
    } 

    document.write("</table>"); 

    var num = prompt("Enter Number", "0") 

    document.write('<table ="1">'); 
    for (i = 1; i < 13; i++) { 
     document.write("<tr><td>" + num + " x " + i + " = " + num * i + "</td></tr>"); 
    } 

    document.write("</table>"); 

    var num = prompt("Enter Number", "0") 

    document.write('<table ="1">'); 
    for (i = 1; i < 13; i++) { 
     document.write("<tr><td>" + num + " x " + i + " = " + num * i + "</td></tr>"); 
    } 

    document.write("</table>"); 


</script> 

Answer 1

Использовать петлю do...while. В приведенном ниже коде также используется Document.createElement() для создания элементов DOM, document.createTextNode() и Node.appendchild(), чтобы добавить их в элемент контейнера вместо document.write().

document.addEventListener('DOMContentLoaded', function() { 
 
    var num; 
 
    var container = document.getElementById('container'); 
 
    do { 
 
    num = prompt("Enter Number", "0"); 
 
    if (num > 0) { 
 
     var table = document.createElement('table'); 
 
     for (i = 1; i < 13; i++) { 
 
     var row = document.createElement('tr'); 
 
     var cell = document.createElement('td'); 
 
     cell.appendChild(document.createTextNode(num + " x " + i + " = " + num * i)); 
 
     row.appendChild(cell); 
 
     table.appendChild(row); 
 
     } 
 
     container.appendChild(table); 
 
    } 
 
    } while (num > 0); 
 
});

td { 
 
    border: 2px solid #f00; 
 
    color: #00f; 
 
}

<div id="container"> 
 
</div>

Answer 2

Аналогично предыдущему сообщению, просто прокомментировал щеколду и пошел. И да, избегайте document.write - это было замечательно в книгах с начала 2000-х годов, но оно устарело и во многих случаях будет ломаться. Я также предположил, что, когда вы говорите таблицы умножения, вы хотите перебрать номер ввода и создать полную таблицу для этого числа. Таким образом, две внутренние петли: одна для входного номера и одна для до двенадцати итераций.

Удачи вам в этом школьном задании!

var num = 0, total = 0; 
 

 
num = parseInt(prompt("Enter Number or -1 to end", 0)); 
 
// Keep doing this loop until -1 is entered. 
 
while (num != -1){ 
 
// Create a table element, but don't add it yet. 
 
var myTable = document.createElement("table"); 
 
    // This line loops to the prompted number... 
 
    for (var i=0; i<=num; i++){ 
 
    // ... and creates each ROW of the table 
 
    var myTr = document.createElement("tr"); 
 
    // this line loops for 12 iterations.. 
 
    for (var j=0; j<13; j++){ 
 
     // and creates and adds each TD element to the current row 
 
     var myTd = document.createElement("td"); 
 
     myTd.innerHTML = j+" * "+i+" = "+j*i; 
 
     myTr.appendChild(myTd); 
 
    } 
 
    // Having added all the TDs to the row, we add the row to the table 
 
    myTable.appendChild(myTr); 
 
    } 
 
    // Having added all the rows to the table, we can add the table to the document! 
 
document.body.appendChild(myTable); 
 
// And now ask for another number to make another table, either starting 
 
// the loop again or breaking out. 
 
num = parseInt(prompt("Enter Number or -1 to end", "0")); 
 
}

table { 
 
    border: 1px dotted red; 
 
    font-family: sans-serif; 
 
    font-size: 9px; 
 
}