Building my first web page

1

Hello Kirupa,

I have just starting studying your very helpful and detailed tutorials, starting from the basics and i’m struggling to find out what i have done wrong when it comes to building my first web page - i cannot seem to get “hello, world!” to appear when i click “click me”?? it must be a simple error however i cannot find where the error is. can you please help?

thanks

2

Hi @Simon82 - welcome to the forums! Can you please share your code? You can paste your HTML into your response here and use the </> code icon from the toolbar to format it as code :slight_smile:

We can then take a look and see what is going on. Alternatively, can you see if there is an error in the Console for your example after you click on the button?

Thanks,
Kirupa

4

Hey mate,

Assuming the you have the <script> tag in the <head> not at as last element in the<body>usually scripts run before the content of your page is loaded (top down).

This means that document.addEventListener() will reference something that hasn’t been loaded (because the page hasn’t loaded) and throw an error" X is not defined"…

There are 5 main ways to get your events wired on your page:

1- super easy- don’t inline your JS and add defer attribute to your script e.g.
<script src="main.js" defer></script>
(this delays your script until after the page has loaded) then put your event listeners in the "main.js" as usual

2- easy- add the html onclick = “runSomeFunction()” attribute to your <button> instead of adding event listeners

3- medium- put all your event listeners in a function and run the function after the page loads e.g
`function listener(){ document.querySelector(‘button’).addEventListener(‘click’, XFunction)
}

document.addEventListener(“DOMContentLoaded”,listener)
`
4- hard- Use Event Delegation Kirupa event delegation

5- not recommended- put your <script src="main.js" style = 'display: none'></script> right before the closing tag inside the body

5 
typ<!DOCTYPE html>
<html lang="en-us">

<head>
<meta charset="utf-8">

<title>Hello...</title>

<style>
    body {
        background-color: #FFD131;
    }

    div {
        background-color: #ffe99b;
        padding: 20px;
        font-family: sans-serif;
        font-weight: bold;
        text-align: center;
        max-width: 500px;
        border-radius: 5px;
        margin: 0 auto;
        margin-top: 30px;
        }

        p {
            font-size: 3em;
            margin: 20px;
        }

        button {
            font-size: 16px;
            font-weight: bold;
            padding: 10px;
            border: 4px solid #000;
         }

         button:hover {
            background-color: #9FFFE3;

         }

         button:active {
            background-color: #000;
            color: #FFF;
         }
</style>7

<script>
    //accessing the element from our page
    var buttonElement = document.querySelector("button");
    var textElement = document.querySelector("p");

    //listening to a click event on the button
    buttonElement.addEventlistener("click", changeText, false);

    //what gets called when the button is clicked
    function changeText(e) {
        textElement.innerText = "hello, world!";
    }
</script>

</head>

<body>
    <div>
        <p>?</p>
        <button>click me</menu></button>
    </div>

   
</html>`Preformatted text`e or paste code here
6

Hey mate,

  • you cant add eventListeners to DOM elements before they have loaded…
  • the <head> gets loaded before the <body> and your <script> will run immediately before your buttons are loaded

There are some strategies above and I amended your code to run using the most common strategy for inline scripts.

Have a look at the comments to understand what is happening…

<!DOCTYPE html>
<html lang="en-us">

<head>
<meta charset="utf-8">

<title>Hello...</title>

<style>
    body {
        background-color: #FFD131;
    }

    div {
        background-color: #ffe99b;
        padding: 20px;
        font-family: sans-serif;
        font-weight: bold;
        text-align: center;
        max-width: 500px;
        border-radius: 5px;
        margin: 0 auto;
        margin-top: 30px;
        }

        p {
            font-size: 3em;
            margin: 20px;
        }

        button {
            font-size: 16px;
            font-weight: bold;
            padding: 10px;
            border: 4px solid #000;
         }

         button:hover {
            background-color: #9FFFE3;

         }

         button:active {
            background-color: #000;
            color: #FFF;
         }
</style>

<script>
    
    /*  
        accessing the element from our page -->  You cant access the elements before the <body> has loaded (DOMContentLoaded')...
        var buttonElement = document.querySelector("button");
        var textElement = document.querySelector("p");
    */
    
  
    /*
        listening to a click event on the button --> the button doen't exist yet...
        buttonElement.addEventlistener("click", changeText, false);
    */

    //what gets called when the button is clicked
    function changeText() { 
        var textElement = document.querySelector("p"); // ---> find textElement now that the document has loaded
        textElement.innerText = "hello, world!";
    }
    // wait for the document to load and then add the event listeners
    document.addEventListener("DOMContentLoaded", function(){ document.querySelector('button').addEventListener('click', changeText) })
</script>

</head>

<body>
    <div>
        <p>?</p>
        <button>click me</menu></button>
    </div>

   
</html>
1 Like
7

Hi Mate,

many thanks for your input, i had a good look at your revised code and worked a treat! thanks for the help

Simon

2 Likes
8

hello i am imran from india i am going through the same problem kindly help me

9

@ayaan919 - welcome to the forums! Can you share in more detail what problem you are having? If you can share a link to your page or the HTML/CSS/JS, that would be helpful :slight_smile: