I have linked CSS and JS files to HTML file and working to create a website. I have added an onclick attribute and assigned a function INCREMENT that just displays "the button was clicked".
Here's the code snippet:-
You can run it also...
// js script
function increment()
{
console.log("The button was clicked");
} /* CSS code*/
body{
background-image: url("station.jpg");
background-size: cover;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
text-align: center;
}
h1{
font-size: 60px;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 60px;
margin-top: 0;
margin-bottom: 20px;
}
button{
border: none;
font-size: x-large; /* own attributes use */
padding-top: 10px;
padding-bottom: 10px;
color:white;
font-weight: bold;
width: 250px;
margin-bottom: 5px;
border-radius: 10px;
}
#increment-btn{
background:green;
}
#save-btn{
background: darkblue;
}<!-- HTML code-->
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>People Entered:</h1>
<h2 id="count-el">0</h2>
<!-- Creating an increment button with id="count-el"-->
<button type="button" id="increment-btn" onclick="increment()">INCREMENT</button>
<script src="index.js"></script>
</body>
</html>Now my problem is that **when I click on the INCREMENT button on my webpage I don't see the "button was clicked" output on my text editor vs code, it just says
[Done] exited with code=1 in 0.094 seconds
but if I go to my webpage and inspect it and open the console there I can see my message "button was clicked". Is this really a problem or its just working fine and the problem is with my vs code setup? Am I confusing between things here, cause I am really new to this and just know the basics. Please help me out...