estaba programando un boton el cual al darle click aumentara un conteo ...
"use strict";
let button = {
clicks: 0,
htmlRef: document.querySelector(".button"),
};
console.log(button);
.button {
padding: 30px;
background-color: #0f0;
border-radius: 20px;
position: absolute;
left: 45%;
top: 40%;
box-shadow: 2px 2px 20px #0a0;
transition: transform 0.5s;
cursor: pointer;
}
:root {
background-color: #222;
}
.button:hover {
transform: scale(1.2, 1.2);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Titulo de la pagina</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="main.js"></script>
<div class="button">Click</div>
</body>
</html>
Cuando estaba precisamente programando la parte de tomar el elemento .button
y cambiar su innerHtml
con el button.clicks
, he tenido varios problemas para tomar el elemento desde js ...
1- Cuando hago un button = document.getElementsByClassName("button")[0]
, desde el navegador todo va bien sin embargo al hacerlo desde el editor, el navegador dice que el elemento es null
...
1er caso
2do caso
Editor
Navegador en respuesta a main.js
Conclusion: Basicamente me da una respuesta cuando hago el codigo desde el navegador, y otra cuando lo hago desde nvim
, alguna idea de que esta pasando?
</body>
, porque ahora se ejecuta antes de que el botón se agregue al HTML y no lo encuentra.