在JavaScript中为乘法时间表添加起点和终点

Question

例如-显示从5（4 * 5）开始到9结束的4次表。

- 4*5 = 20
- 4*6 = 24
- 4*7 = 28
- 4*8 = 32
- 4*9 = 36

我很困惑如何添加开始和结束值。

 function printTable(){ var timesTable =Number(document.getElementById('txtNumber').value); for(var i=1; i<=10; i++){ var pTag= document.getElementById('pPrint'); pTag.innerHTML += (timesTable*i) + "<br/>" } } 

 <body style="text-align: center;"> <h1>JavaScript - Function to Display Table of an entered Number.</h1> <p><input type="text" id="txtNumber" placeholder="Enter number"/></p> <h1>enter the start value</h1> <p><input type="text" id="textNumber" placeholder="Enter number"/></p> <h1>enter the end value</h1> <p><input type="text" id="teextNumber" placeholder="Enter number"/></p> <p><input type="button" value="Print Table." onclick='printTable()'/> <!--print numbers--> <p id="pPrint"></p> </body> 

如何在JavaScript中为乘法时间表添加起点和终点？

Answer 1

如果我正确理解了您的问题，也许您可​​以执行以下操作；

1. 通过Number(document.getElementById('textNumber').value)获取起始编号
2. 通过Number(document.getElementById('teextNumber').value)获取结束号
3. 使用for循环可通过for(var i= start; i<= end; i++){

您还应该检查起始编号是否小于结束编号，以确保循环终止：

 function printTable(){ var start = Number(document.getElementById('textNumber').value); var end = Number(document.getElementById('teextNumber').value); var timesTable =Number(document.getElementById('txtNumber').value); // Query document for pTag once, rather than per loop iteration var pTag= document.getElementById('pPrint'); // Check that start is less than end, to ensure that the loop // terminates (ie doesn't loop infinitely) if(start < end) { for(var i= start; i<= end; i++){ // Present the multiplication in the required format pTag.innerHTML += ('- ' + i + ' * ' + timesTable + ' = ' + (timesTable*i) + '<br/>') } } } 

 <h5>JavaScript - Function to Display Table of an entered Number.</h5> <p><input type="text" id="txtNumber" placeholder="Enter number"/></p> <h5>enter the start value</h5> <p><input type="text" id="textNumber" placeholder="Enter number"/></p> <h5>enter the end value</h5> <p><input type="text" id="teextNumber" placeholder="Enter number"/></p> <p><input type="button" value="Print Table." onclick='printTable()'/> <p id="pPrint"></p> 

Answer 2

如果我正确理解了您的问题，那么我将添加乘法函数，如下所示：

 function printTable(){ var ps =Number(document.getElementById('txtNumber').value); var start =Number(document.getElementById('textNumber').value); var end =Number(document.getElementById('teextNumber').value); for(var i=start; i<=end; i++){ var pTag= document.getElementById('pPrint'); pTag.innerHTML += "- " + (ps) + "*" + (i) + " = " + ps*i + "<br/>" } } 

 <body style="text-align: center;"> <h1>JavaScript - Function to Display Table of an entered Number.</h1> <p><input type="text" id="txtNumber" placeholder="Enter number"/></p> <h1>enter the start value</h1> <p><input type="text" id="textNumber" placeholder="Enter number"/></p> <h1>enter the end value</h1> <p><input type="text" id="teextNumber" placeholder="Enter number"/></p> <p><input type="button" value="Print Table." onclick='printTable()'/> <!--print numbers--> <p id="pPrint"></p> </body> 

ps是起始倍数，start是起始倍数，end是结束数。

编辑：添加缺少的框

Answer 3

将起点和终点添加到for循环中，如下所示：

---

function printTable(){
    var timesTable =Number(document.getElementById('txtNumber').value);
    var start = document.getElementById("textNumber").value;
    var end = document.getElementById("teextNumber").value;

    for(var i=start; i<=end; i++){
    var pTag= document.getElementById('pPrint');
    pTag.innerHTML += (timesTable*i) + "<br/>"
 }

}