Duda con una funcion en javascript

palacio29 · 30 Mayo 2020, 06:27 AM

Hola.
Tengo un problema. Lo que necesito hacer es un boton que al darle click, haga aparecer o desaparecer un DIV o algun elemento en particular. Algo que parece simple, pero me esta dando problemas (soy nuevo en esto).
En mi proyecto no esta funcionando, asi que traje un ejemplo y si me pueden hacer el favor de decirme en que estoy fallando porque no le encuentro la vuelta.

Este es el codigo, es un HTML que consta de un titulo y quiero que modifique su estilo

Código (html4strict) [Seleccionar]

<html>
<head>
<link type="text/css" href="estilo.css" rel="stylesheet"></link>

</head>
<body>
<H1 class="titulo">Hola</H1>
<button onclick="continuar()">Borrar el titulo</button>
</body>

<script>
	function continuar()
	{
		alert("Hola esto funciona, osea entra en la funcion");
		var div = document.getElementByClass("titulo");
		div.style.display="none";
	}
</script>
</html>

El CSS lo unico que tiene es la clase titulo que tiene la linea: display:block;

EdePC · 30 Mayo 2020, 14:12 PM

- Ya veo, el problema está en que getElementByClass está incompleto, lo correcto es getElementsByClassName. Siempre puedes utilizar un editor de código ligero como SublimeText o uno más completo como Visual Studio Code para que te ayude a con la sintaxis y autocompletado de código. Además tienes la Consola en las Herramientas de Desarrollador del navegador web (F12), ahí debe mostrar los errores y además puedes probar código.

- getElementsByClassName devuelve un HTMLCollection que es un Array Like, osea, devuelve siempre una especie de Array que contiene todos los elementos que tengan la Clase especificada, si quieres obtener solo el primer elemento debes usar el primer índice ( .[0] )

- Lo siguiente funciona para mí:

Código (javascript,13) [Seleccionar]

<html>
  <head>
    <link type="text/css" href="estilo.css" rel="stylesheet">
  </head>
  <body>
    <h1 class="titulo">Hola</h1>
    <button onclick="continuar()">Borrar el titulo</button>
  </body>
  
  <script>
    function continuar() {
      alert("Hola esto funciona, osea entra en la funcion");
      var div = document.getElementsByClassName("titulo")[0];
      div.style.display = "none";
    }
  </script>
</html>

palacio29 · 30 Mayo 2020, 16:01 PM

Muchisimas gracias, estaba usando el sublime, pero no se que paso.

Test Foro de elhacker.net SMF 2.1

Duda con una funcion en javascript

palacio29

EdePC

palacio29