Having trouble with external javascript

Question

I am having a very especific and strange problem: some things are working on the internal javascript, but not working on the external file. The source is ok, i can console.log things and use functions called by buttons etc. but the code here doesn't work on the external, only on the internal

html

<!DOCTYPE html>
<html lang="pt-br">
<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>Rock-Scissor-Paper</title>
<script src="rock-paper-scissors.js"></script>
</head>
<body>
    <h1>Rock-Paper-Scissors</h1>

<div class="you-area">

<div> <br><br><br></br>
    <span class="btn">rock</span>
    <span class="btn">paper</span>
    <span class="btn">scissors</span>
</div>

</div>
</body>
</html>
<style>
    body{text-align: center;}

    .btn
    {color: red;
    padding-right: 5rem;}

    .btn:hover
    {
        cursor: pointer;
    }
</style>

external js file:

const btns = document.querySelectorAll('.btn');

btns.forEach((item) =>{
    item.addEventListener("click", (event) =>{
        console.log('is it working?');
    
    })})

i tested the source, i don't have no extension installd except for Live Server. I use vscode and vanilla javascript.

Having trouble with external javascript

0 Answers0