'Console.log() working in online IDE, not VScode?

Good Evening,

I am having trouble getting my (click) event to trigger console.log(e). This works in CodePen but not Microsoft Edge. Code is below.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>calculator</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="container">
        <div class="grid">
            <div id ="display"><p></p></div>
            <div id="equals" class="operatorButton calcButton">=</div>
            <div id="seven" class="numberButton calcButton">7</div>
            <div id="eight" class="numberButton calcButton">8</div>
            <div id="nine" class="numberButton calcButton">9</div>
            <div id="add" class="operatorButton calcButton">+</div>
            <div id="four" class="numberButton calcButton">4</div>
            <div id="five" class="numberButton calcButton">5</div>
            <div id="six" class="numberButton calcButton">6</div>
            <div id="minus" class="operatorButton calcButton">-</div>
            <div id="one" class="numberButton calcButton">1</div>
            <div id="two" class="numberButton calcButton">2</div>
            <div id="three"class="numberButton calcButton">3</div>
            <div id="zero"class="numberButton calcButton" >0</div>
            <div id="divide" class="operatorButton calcButton">/</div>
            <div id="times" class="operatorButton calcButton">*</div>
            <div id="allClear" class="operatorButton calcButton">AC</div>



        </div>  
    </div>
    
    <script type="javaScript" src="script.js"> </script> 
</body>
</html>

JS

const numberBtns = document.querySelectorAll(`.numberButton`)
    numberBtns.forEach(btn => btn.addEventListener(`click`, (e) =>{
    console.log(parseInt(e.target.innerText));
    }));

    
//Operand buttons
const operatorBtns = document.querySelectorAll(`.operatorButton`)
    operatorBtns.forEach(btn => btn.addEventListener(`click`, (e) =>{
    console.log("e.target.innerText");
    }));

I have tried using the script with the defer tag and it's current location but cant get it to work.

Cheers, for any help in advance

javascripthtmlvisual-studio-codecodepen


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions