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

Question

I have a function that i want displayed into the paragraph below at the click of a button. I've been searching around for how to do this and i came across the to have text be implemented on W3Schools by using "document.getElementById().innerHTML = ..." I've tried to redo different versions of the code below to get it to show the called function however i can not figure it out. The code works great in the console and with Alerts so its definitely when im trying to put it into the html is when i come across problems. Also is there a way to do it without using J-Query or other external sources? those where the only answers last time i came across this problem on a different project.) I'm also using JSfiddle so the javascript is automatically including without linking it in the 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';
    }
}

I'm looking to insert the WOGen() function into the paragraph. I've already tried a few different ways and can not get it.

@BkSantiago when i am clicking the button i can't see to get anything to display under it. What did you use to test it? — J D
– J D, Commented May 21, 2018 at 3:12
I'm also using JSfiddle so the javascript is automatically including without linking it in the HTML I assume you have your js in seperate file. Did you include your js file to HTML? — Dean
– Dean, Commented May 21, 2018 at 3:14
You can also check on the console if your js files are included by invoking WOGen() and other functions — Bk Santiago
– Bk Santiago, Commented May 21, 2018 at 3:16
@Dean i normally use JSfiddle to creat and preview simple documents with html and css and the css is auto linked without any url so would the Javascript be as well? If not how would i link it? i know how to do it with documents but this is on the web. — J D
– J D, Commented May 21, 2018 at 3:20

Thomas Cohn · Accepted Answer · 2018-05-21 03:23:03Z

1

Everything about your code seems to be correct (syntax is good, functions look right), which is what makes this issue interesting.

With your code, directly run in JSFiddle (see here), element inspect throws the error (index):161 Uncaught ReferenceError: WOGen is not defined. So for some reason, the HTML can't find your function.

Interestingly, if I use a built in function -- in my case, Date() -- it works (see here). And if I include your code in a <script> tag before that button, using WOGen(), it also works (see here).

So I think the problem is the click listener on that button is being created before the function it's supposed to point to, and that's causing your problem. You could fix this by creating the listener within your javascript code after WOGen is defined. Replace your button tag with <button id='myButton'>Display</button> and in your javascript, add the following code after defining WOGen:

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

See here for a working example of the code using this method.

answered May 21, 2018 at 3:23

Thomas Cohn

5074 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

J D Over a year ago

So would the Javascript code above go in the bottom end of the WOGen function or outside of it? @Helium_1s2

Thomas Cohn Over a year ago

Outside of it. You need this to be executed by the page itself after WOGen has been defined (or else you will get that uncaught reference error again.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related