如何使用按钮将 JavaScript 功能实现到我的 HTML 中？

Question

我有一个功能，希望通过单击按钮显示在下面的段落中。我一直在寻找如何做到这一点，我遇到了通过使用 "document.getElementById().innerHTML = ..." 在 W3Schools 上实现文本我试图重做下面代码的不同版本以使其显示被调用的函数但是我无法弄清楚。该代码在控制台和警报中运行良好，因此当我尝试将其放入 html 时肯定是我遇到问题的时候。还有没有使用 J-Query 或其他外部资源的方法吗？那些我上次在另一个项目中遇到这个问题时唯一的答案。）我也在使用 JSfiddle 所以 javascript 自动包含而不在 HTML.

中链接它

HTML

<html>

    <head> </head>

    <body>
        <button onclick='document.getElementById("p1").innerHTML = WOGen()'>Display</button>
        <p id='p1'></p>
    </body>

</html>

JavaScript

function upperB() {
    var upperWO = [
        'pullups',
        'dips',
        'plank',
        'incline pushups',
        'decline pushups',
        'pull downs'
    ];
    return 'today is Upper Body: ' + upperWO;
}

function Legs() {
    var legWO = [
        'regular squats',
        'split squats',
        'lunges',
        'calf raises',
        'glut bridges'
    ];
    return 'today is Leg Day: ' + legWO;
}

function Abs() {
    var absWO = [
        'crunches',
        'long arm crunches',
        'scissors',
        'leg ups',
        'crunch kicks',
        'flutter kicks',
        'plank',
        'hollow holds',
        'star plank',
        'sitting punches',
        'plank rolls'
    ];
    return 'today is Ab Day: ' + absWO;
}

function Calisthenics() {
    var calith = [
        'bag work',
        'pushups',
        'crunches',
        'squats'
    ];
    return 'Today is calisthenics Day: ' + calith;
}

function WOGen() {
    var NDay = new Date();
    var Day = NDay.getDay();

    if (Day === 0) {
        return '73k and Swim Laps';
    }
    if (Day === 1) {
        return upperB();
    }
    if (Day === 2) {
        return Legs();
    }
    if (Day === 3) {
        return Abs();
    }
    if (Day === 4) {
        return Calisthenics();
    }
    if (Day === 5) {
        return '73k and Swim Laps';
    }
    if (Day === 6) {
        return '73k and Swim Laps';
    }
}

我想在段落中插入 WOGen() 函数。我已经尝试了几种不同的方法，但无法得到它。

Answer 1

关于您的代码的一切似乎都是正确的（语法良好，函数看起来正确），这就是使这个问题变得有趣的原因。

使用您的代码，直接在 JSFiddle (see here) 中运行，element inspect 会抛出错误 (index):161 Uncaught ReferenceError: WOGen is not defined。因此，出于某种原因，HTML 无法找到您的函数。

有趣的是，如果我使用内置函数——在我的例子中，Date()——它可以工作 (see here). And if I include your code in a <script> tag before that button, using WOGen(), it also works (see here)。

所以我认为问题在于该按钮上的点击侦听器是在它应该指向的函数之前创建的，这导致了您的问题。在定义 WOGen 之后，您可以通过在 javascript 代码中创建侦听器来解决此问题。将按钮标签替换为 <button id='myButton'>Display</button> 并在 javascript 中添加以下代码 after defining WOGen:

document.getElementById('myButton').addEventListener('click', function() {
  document.getElementById("p1").innerHTML = WOGen();
}

See here 使用此方法的代码的工作示例。

如何使用按钮将 JavaScript 功能实现到我的 HTML 中？

How can i implement a JavaScript function into my HTML with a button?

html

javascript

getelementbyid