代码之家 › 专栏 › 技术社区 › J D

如何使用按钮在HTML中实现一个javascript函数?

getelementbyid html javascript

J D · 技术社区 · 7 年前

我有一个功能,我想在点击一个按钮时显示在下面的段落中。我一直在寻找如何做到这一点,我遇到了使用“document.getElementByID().innerHTML=…”在W3School上实现文本的方法,我尝试重新执行下面的代码的不同版本,以使其显示被调用的函数,但我无法理解。代码在控制台和警报中工作得很好,所以当我试图将它放入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()函数。我已经尝试了几种不同的方法,但还是无法得到。

1 回复 | 直到 7 年前

Helium_1s2 7 年前

关于代码的所有内容似乎都是正确的(语法很好,函数看起来很正确),这使得这个问题变得有趣。

使用代码,直接在JSfiddle中运行( see here )元素检查引发错误 (index):161 Uncaught ReferenceError: WOGen is not defined . 因此出于某种原因,HTML找不到您的函数。

有趣的是,如果我使用一个内置函数——在我的例子中, Date() --它起作用了( see here )如果我把你的代码包括在 <script> 在该按钮前标记,使用 WOGen() ,它也有效( see here )。

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

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

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