# Building my first web page

**URL:** <https://forum.kirupa.com/t/building-my-first-web-page/658408>\
**Category:** Uncategorized\
**Created:** [April 26, 2023, 7:28pm UTC](https://forum.kirupa.com/t/building-my-first-web-page/658408 "2023-04-26T19:28:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Simon82](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@Simon82](https://forum.kirupa.com/u/Simon82)\
**Post date:** [April 26, 2023, 7:28pm UTC](https://forum.kirupa.com/t/building-my-first-web-page/658408/1 "2023-04-26T19:28:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 27, 2023, 5:14am UTC](https://forum.kirupa.com/t/building-my-first-web-page/658408/2 "2023-04-27T05:14:54Z")

</div>

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 🙂

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?

> **[Console Logging Basics](https://www.kirupa.com/html5/console.htm)**
>
> Go beyond silly alert statements and learn how to use the console to get a better view into what your code is doing.

Thanks,  
Kirupa

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [April 27, 2023, 10:08am UTC](https://forum.kirupa.com/t/building-my-first-web-page/658408/4 "2023-04-27T10:08:22Z")

</div>

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](https://www.kirupa.com/html5/handling_events_for_many_elements.htm)

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

---

<div class="post-metadata">

**Author:** ![Simon82](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@Simon82](https://forum.kirupa.com/u/Simon82)\
**Post date:** [April 29, 2023, 3:04pm UTC](https://forum.kirupa.com/t/building-my-first-web-page/658408/5 "2023-04-29T15:04:28Z")

</div>

```auto
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

```

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [April 30, 2023, 1:04am UTC](https://forum.kirupa.com/t/building-my-first-web-page/658408/6 "2023-04-30T01:04:29Z")

</div>

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…

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![Simon82](https://avatars.discourse-cdn.com/v4/letter/s/54ee81/32.png) [@Simon82](https://forum.kirupa.com/u/Simon82)\
**Post date:** [May 1, 2023, 3:10pm UTC](https://forum.kirupa.com/t/building-my-first-web-page/658408/7 "2023-05-01T15:10:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ayaan919](https://avatars.discourse-cdn.com/v4/letter/a/d2c977/32.png) [@ayaan919](https://forum.kirupa.com/u/ayaan919)\
**Post date:** [May 30, 2023, 9:31am UTC](https://forum.kirupa.com/t/building-my-first-web-page/658408/8 "2023-05-30T09:31:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 30, 2023, 3:12pm UTC](https://forum.kirupa.com/t/building-my-first-web-page/658408/9 "2023-05-30T15:12:49Z")

</div>

@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 🙂
