javascript - 打印乘法表

标签 javascript

我想打印用户输入数字的乘法表。但是点击没有任何反应但是错误是什么?还是我早点加入了这个项目?

<body>
<p>Multiplication table</p>
<input placeholder="Enter the number" type="text" name="number" id="quest"/>
<br />
<button onclick="multFunction()">Process</button>
<br />

<p id="multiply"></p>

<script>
    function multFunction() {
        var a = document.getElementsById("quest").value;
        var i = 1;
        for (i = 1 ; i < 11 ; i++) {
            var c = parseInt(a) * parseInt(i);
            document.getElementById("multiply").innerHTML = a + "x" + i + "=" + c;
        }

    }
</script>

最佳答案

您的代码中有几个错误:

var a = document.getElementsById("quest").value;

应该是:

var a = document.getElementById("quest").value;
//                         ^ No "s" there.

接下来,您不想每次都替换 innerHTML,而是想向其中添加一个新行。但是,写入 innerHTML 通常不是一个好主意。 (每次写入它都会导致您的浏览器重新解析 DOM)
替换:

document.getElementById("multiply").innerHTML = a + "x" + i + "=" + c;

与:

result += a + " x " + i + " = " + c + '</br>';

并在您的函数前面添加 result = '';。然后,在循环之后,将result写入innerHTML

这是一个工作演示:

function multFunction() {
    var a = document.getElementById("quest").value;
    var i = 1;
    var result = '';
    for (i = 1 ; i < 11 ; i++) {
        var c = parseInt(a) * parseInt(i);
        result += a + " x " + i + " = " + c + '</br>';
    }
    document.getElementById("multiply").innerHTML = result;
}
<p>Multiplication table</p>
<input placeholder="Enter the number" type="text" name="number" id="quest"/>
<br />
<button onclick="multFunction()">Enter the number</button>
<br />

<p id="multiply"></p>

关于javascript - 打印乘法表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32604951/

相关文章:

javascript - HTML/Javascript - 通过单击父行展开和折叠表行(子行)

javascript - 仅通过透明部分上传图像

javascript - 使用 javascript(或 jQuery)选择和操作 CSS 伪元素,例如::before 和::after

javascript - 在不使用 React 调整标题大小的情况下从标题创建下拉列表

javascript - iframe 内的内容根本不加载或显示警告 - iframe src 不安全且与包含页面不同的域

JavaScript - 检查字符串是否包含数组中彼此相邻的两个字符串并在其间插入字符串

javascript - 当我使用它时,jquery 单击绑定(bind)不起作用

javascript - 当国家/地区没有数据时,高 map 单击即可获取国家/地区名称

javascript - 移动导航在滚动时消失

javascript - ReactJS 和父/子组件 : How do I build out this conceptual calendar?