button onlick that i tried linking with my javascript doesn't seem to be working or highlighting orange on my vs code when i add the ""

Question

i have tried everything in order to fix the issue and even looked at the video of the tutorial im learning from but can't seem to get it working crrectly. Even checked around the internet. i added the javascript code so you guys can see that i did define it. im new to all this so explaining it best you can would be greatly appreciated

  <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
        <link rel="stylesheet" href="style.css">
        <title>Javascript Your Age In Days</title>
    </head>
    <body>
        <div class="container-1">
            <h2>Challenge 1: Your Age In Days</h2>
                <div class="flex-box-container-1">
                
            
                <div>
                    <button class="btn btn-primary" onclick='ageInDays()'>Click Here</button>
                </div>
            
                <div>
                    <button class="btn btn-danger">Reset</button>
                </div>
            
                <div class="flex-box-container-1">
                    <div id="flex-box-container-1"></div>
                </div>
                
                </div>
    
            </div>
        
        
        
         <script src="script.js"></script>
    
    </body>
    </html>
    
    
  
function ageInDays() {
    let birthYear = prompt("what year were you born...Good friend?");

}

I don't see you define `ageInDays` anywhere. But really, [don't use inline handlers](https://stackoverflow.com/a/59539045) — CertainPerformance, Sep 08 '20 at 03:02
function ageInDays() { let birthYear = prompt("what year were you born...Good friend?"); } — GmmaShark, Sep 08 '20 at 03:02

score 0 · Answer 1 · answered Sep 08 '20 at 03:10

It not working because you are using in line script for the invocation of the ageInDays function, but the definition is in another file that has not loaded when the browser read the inline JS so there are two ways of fixing this.

Use an inline script so the JS is already on the browser same time as HTML like

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
        <link rel="stylesheet" href="style.css">
        <title>Javascript Your Age In Days</title>
    </head>
    <body>
        <div class="container-1">
            <h2>Challenge 1: Your Age In Days</h2>
                <div class="flex-box-container-1">
                <div>
                    <button class="btn btn-primary" onclick="ageInDays()">Click Here</button>
                </div>
                <div>
                    <button class="btn btn-danger">Reset</button>
                </div>
                <div class="flex-box-container-1">
                    <div id="flex-box-container-1"></div>
                </div>
                </div>
            </div>
         <script>
             function ageInDays() { let birthYear = prompt("what year were you born...Good friend?"); } 
         </script>
    </body>
    </html>

handle everything in the script file

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
        <link rel="stylesheet" href="style.css">
        <title>Javascript Your Age In Days</title>
    </head>
    <body>
        <div class="container-1">
            <h2>Challenge 1: Your Age In Days</h2>
                <div class="flex-box-container-1">
                <div>
                    <button class="btn btn-primary" id="action">Click Here</button>
                </div>
                <div>
                    <button class="btn btn-danger">Reset</button>
                </div>
                <div class="flex-box-container-1">
                    <div id="flex-box-container-1"></div>
                </div>
                </div>
            </div>
         <script src="main.js"></script>
    </body>
    </html>

and in the main.js

const button = document.getElementById('action');
button.addEventListener('click', function(){
    let birthYear = prompt("what year were you born...Good friend?"); 
});

o and by the way try to always use double quotes in the HTML — Shulkmaster, Sep 08 '20 at 03:14

score 0 · Answer 2 · edited Sep 08 '20 at 09:24

0

Add this to your script.js file, and remove onclick='ageInDays()' from your button.

let btn = document.querySelector(".btn-primary");
btn.addEventListener("click", ageInDays);

function ageInDays(){
  //code to be executed when you clicked the button
}

edited Sep 08 '20 at 09:24

shreyasm-dev

2,711
5
16
34

answered Sep 08 '20 at 03:14

gamerC

29
3

button onlick that i tried linking with my javascript doesn't seem to be working or highlighting orange on my vs code when i add the ""

2 Answers2