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

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.

Solution

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.