Why does my JavaScript works on here but not in my localhost or JSFiddle?

Question

I'm trying to create a dynamic webpage where each button displays a specific <div> page while hiding the rest of the <div> pages.

I deploy it on here, in my localhost, and on jsfiddle but somehow it's not operating correctly on jsfiddle and my localhost BUT it works on here.

I'm not quite sure why is that so?

My HTML:

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>
<button onClick="myFunction2()">Try it</button>
<button onClick="myFunction3()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<div id="div2" style="display: none;">
Div2
</div>

<div id="div3" style="display: none;">Div3</div>

My CSS:

#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}
#div2{
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: purple;
    margin-top: 20px;
}

#div3{
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: yellow;
    margin-top: 20px;
}

My JavaScript:

function myFunction() {
    var x = document.getElementById("myDIV");
    var y = document.getElementById("div2");
    var z = document.getElementById("div3");
    if (x.style.display === "none") {
        x.style.display = "block";
    y.style.display = "none";
        z.style.display = "none";
    }
}

function myFunction2() {
    var x = document.getElementById("div2");
    var y = document.getElementById("myDIV");
    var z = document.getElementById("div3");
    if (x.style.display === "none") {
        x.style.display = "block";     
        y.style.display = "none";
        z.style.display = "none";
    }
}

function myFunction3() {
    var x = document.getElementById("div3");
    var y = document.getElementById("myDIV");
    var z = document.getElementById("div2");
    if (x.style.display === "none") {
        x.style.display = "block";     
        y.style.display = "none";
        z.style.display = "none";
    }
}

function myFunction() {
    var x = document.getElementById("myDIV");
    var y = document.getElementById("div2");
    var z = document.getElementById("div3");
    if (x.style.display === "none") {
        x.style.display = "block";
    y.style.display = "none";
        z.style.display = "none";
    }
}

function myFunction2() {
    var x = document.getElementById("div2");
    var y = document.getElementById("myDIV");
    var z = document.getElementById("div3");
    if (x.style.display === "none") {
        x.style.display = "block";     
        y.style.display = "none";
        z.style.display = "none";
    }
}

function myFunction3() {
    var x = document.getElementById("div3");
    var y = document.getElementById("myDIV");
    var z = document.getElementById("div2");
    if (x.style.display === "none") {
        x.style.display = "block";     
        y.style.display = "none";
        z.style.display = "none";
    }
}

#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
}
#div2{
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: purple;
    margin-top: 20px;
}

#div3{
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: yellow;
    margin-top: 20px;
}

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>
<button onClick="myFunction2()">Try it</button>
<button onClick="myFunction3()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<div id="div2" style="display: none;">
Div2
</div>

<div id="div3" style="display: none;">Div3</div>

EDIT:

My JSfiddle link: https://jsfiddle.net/yvw4gwwh/3/

What errors are you getting in the console of your browser's developer tools? — j08691, Mar 26 '18 at 21:08
you are using `onClick` instead of `onclick` this may be causing an issue — George, Mar 26 '18 at 21:09
On jsfiddle it's probably this: https://stackoverflow.com/questions/5431351/simple-example-doesnt-work-on-jsfiddle — Barmar, Mar 26 '18 at 21:10
Uncaught TypeError: Cannot read property 'display' of null at myFunction(navigation.js:5) — 5120bee, Mar 26 '18 at 21:11
That means `document.getElementById()` is not finding the element. Maybe you have a typo in the ID. — Barmar, Mar 26 '18 at 21:12
FYI: Your 3 CSS selectors should all be merged into one since they all are exact duplicates of each other (with the exception of the `background-color` setting). The selector would be `#myDIV, #div2, #div3`. Then, you would have 3 separate selectors (as you do now), but each would have only one line it it for the `background-color`. — Scott Marcus, Mar 26 '18 at 21:13
@Barmar It shouldn't be a typo since the implementation actually runs on here if you click "Run Code Snippet". It just doesn't work on JSfiddle nor my local host and I don't know why — 5120bee, Mar 26 '18 at 21:15
The fiddle works when you change `OnLoad` to `No wrap`: https://jsfiddle.net/barmar/yvw4gwwh/4/ -- the reason is in the question I linked to above. — Barmar, Mar 26 '18 at 21:17
@Barmar How can I set that on my local host so that it works? — 5120bee, Mar 26 '18 at 21:21
You shouldn't need to do anything special on localhost. It's a peculiar jsfiddle default. — Barmar, Mar 26 '18 at 21:39

score 1 · Answer 1 · answered Mar 26 '18 at 22:45

1

Change your Javascript Load type to No wrap - in <body>; Try it here: https://jsfiddle.net/yvw4gwwh/14/

answered Mar 26 '18 at 22:45

Johnsackson

439
2
7

Why does my JavaScript works on here but not in my localhost or JSFiddle?

1 Answers1