CSS & HTML
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="firstapp.js"></script>
</head>
<body>
<div id="buttons">
<h1>Hello</h1>
<h2>0</h2>
<button class="btn btn-primary" type="submit">Hello</button>
<button class="button2">count </button>
</div>
</body>
</html>
JavaScript
let x = 0
function counter() {
x++;
document.querySelector('h2').innerHTML = x;
if (x % 10 === 0) {
alert(`counter is now ${x}`);
}
}
document.addEventListener("DOMContentLoaded", function() {
document.querySelector('.button2').onclick = counter; //This statement is for counter function
document.querySelector('.btn.btn-primary').onclick = function() { //This is Hello Function
let heading1 = document.querySelector('h1');
if (heading1.innerHTML === "Hello!!") {
heading1.innerHTML = "Goodbye!!";
//document.querySelector('.btn.btn-outline-secondary').innerHTML = 'goodbye';
} else {
heading1.innerHTML = "Hello!!";
//document.querySelector('.btn.btn-outline-secondary').innerHTML = 'Hello!!';
}
};
})
Issue with Bootstrap Classes in JavaScript
I encountered an issue where my document.queryselector was unable to recognize any bootstrap classes when linked to a local CSS file. This resulted in the error message "TypeError: Cannot set property 'onclick' of null at HTMLDocument." It seems like there might be a conflict between Bootstrap and my JavaScript code causing this problem.