Question 203426 in Html Question posted in
Some basic documentation can be found here.

Html – Why is the button glitched on my website in visual studio code?

I am creating my own website in visual studio code using html, css, and javascript. For some reason when I click on the Code Editors button, it loads the page for like a nano second then goes back to the home page. I have no clue what is going on and I have worked really hard on this project. Here is the code to my home page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programmers International</title>
    <style>
        body {
            background-color: black;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh; /* Adjust the height as needed */
            text-align: center;
            margin-bottom: 20px; /* Add margin to create space between containers */
        }

        h1 {
            color: white;
            margin-top: 0;
        }

        .button {
            background-color: #4CAF50;
            color: white;
            font-size: 20px;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            margin-top: 20px;
        }

        .button:hover {
            background-color: #45a049;
        }
    </style>
    
    <script>
      function loadPage(buttonId, pageUrl) {
    event.preventDefault(); // Prevent default button behavior
    window.location.href = pageUrl;
}

    </script>

<script>
    window.addEventListener('contextmenu', function (e) {
        e.preventDefault();
    });
</script>
</head>
<body>
    <div class="container">
        <h1>Programmers International</h1>
        <button id="resourcesButton" class="button" onclick="loadPage('resourcesButton','Resources.html')">Resources</button>
        <button id="codeEditorsButton" class="button" onclick="loadPage('codeEditorsButton','CodeEditors.html')">Code Editors</button>
    </div>
</body>
</html>

I tried every possible solution even clearing all of my browsing data including cache’s, and switching to a different browser. And editing the code a million times.

Tags:

2

Answers


  1. 0

    I’m not sure if you only want to use javascript to load the page, but an easier way to would be using the hyperlink tag, you can place the pages name in their and it’ll redirect.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Programmers International</title>
    <style>
        body {
            background-color: black;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh; /* Adjust the height as needed */
            text-align: center;
            margin-bottom: 20px; /* Add margin to create space between containers */
        }

        h1 {
            color: white;
            margin-top: 0;
        }

        .button {
            background-color: #4CAF50;
            color: white;
            font-size: 20px;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            margin-top: 20px;
        }

        .button:hover {
            background-color: #45a049;
        }

        a {
            text-decoration:none;
        }
    </style>
    
    <script>
      function loadPage(buttonId, pageUrl) {
    event.preventDefault(); // Prevent default button behavior
    window.location.href = pageUrl;
}

    </script>

<script>
    window.addEventListener('contextmenu', function (e) {
        e.preventDefault();
    });
</script>
</head>
<body>
    <div class="container">
        <h1>Programmers International</h1>
        <button id="resourcesButton" class="button" onclick="loadPage('resourcesButton','Resources.html')">Resources</button>
        <a href="" id="codeEditorsButton" class="button">Code Editors</a>
    </div>
</body>
</html>
    Login or Signup to reply.
  2. 0

    So typically this isnt how I would go about writing JS with HTML. It is considered best practice to write your JS in a seperate document. Ive gone ahead and done that and I have the code for it. I used query selectors to add the event listeners instead of having the function call in the onclick attribute and it works fine for me.

    to link your HTML to your JS put this at the bottom of the head element

    <script src="script.js"></script>

    the contents of the JS document that worked for me in this application are as follows.

    codeEditorsButton = document.getElementById("codeEditorsButton");

codeEditorsButton.addEventListener(
  "onclick",
  loadPage("codeEditorsButton", "CodeEditors.html")
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search