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?");

}

Answer 1

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?"); 
});

Answer 2

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
}

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

2 answers

solution1
0 2020-09-08 03:10:10

solution2
0 2020-09-08 03:14:48

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

2 answers

solution1 0 2020-09-08 03:10:10

solution2 0 2020-09-08 03:14:48

solution1
0 2020-09-08 03:10:10

solution2
0 2020-09-08 03:14:48