首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将我的JavaScript函数链接到HTML元素?

如何将我的JavaScript函数链接到HTML元素?
EN

Stack Overflow用户
提问于 2018-10-12 02:52:37
回答 3查看 247关注 0票数 0

我试图让我的随机生成的数字出现在我的HTML中的一个段落中,但我一直收到一个无法设置null文本内容的error。id是正确的,并且是我想要的位置。我做错了什么?

代码语言:javascript
复制
function generateNumToMatch() {
    var numToMatch = (Math.floor(Math.random() * (100) + 1));
    document.getElementById("computerNumber").textContent = numToMatch;
}  
代码语言:javascript
复制
 <div class ="card-body">
    <p id ="computerNumber" class="card-text"></p>
 </div>

EN

回答 3

Stack Overflow用户

发布于 2018-10-12 03:40:00

我认为问题出在JS中,我可以使用以下代码生成随机数:

代码语言:javascript
复制
var numToMatch;
generateNumToMatch();
function generateNumToMatch() {
    numToMatch = (Math.floor(Math.random() * (100) + 1));
}
document.getElementById("computerNumber").textContent = numToMatch;
票数 0
EN

Stack Overflow用户

发布于 2018-10-12 04:35:01

HTML元素需要使用onclick属性。添加一个按钮,并向其添加代码,如下所示:

代码语言:javascript
复制
<button onclick="generateNumToMatch()">Click me</button>

按钮的onClick事件会触发,它会运行您的javascript代码。您的javascript代码将运行,并将名为"computerNumber“的文本属性设置为您创建的随机数。

或者,您可以运行代码一次,因此您可以这样做:

代码语言:javascript
复制
var numToMatch;
numToMatch = (Math.floor(Math.random() * (100) + 1));
document.getElementById("computerNumber").textContent = numToMatch;
票数 0
EN

Stack Overflow用户

发布于 2018-10-12 07:22:50

onclick事件触发:

代码语言:javascript
复制
function generateNumToMatch() {
    let numToMatch = (Math.floor(Math.random() * (100) + 1));
    document.getElementById("computerNumber").innerHTML = numToMatch;
}
代码语言:javascript
复制
<div class="card-body">
    <button onclick="generateNumToMatch()">Get a number</button>
        <p id="computerNumber"></p>
 </div>

页面加载时触发:

代码语言:javascript
复制
function generateNumToMatch() {
    let numToMatch = (Math.floor(Math.random() * (100) + 1));
    document.getElementById("num").innerHTML = numToMatch;
}
代码语言:javascript
复制
span {
  color:red;
}
代码语言:javascript
复制
<body onload="generateNumToMatch()">
  <h4>Random number goes here: 
    <span id="num"></span>
  </h4>
</body>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52767068

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档