JavaScript - getElementById no reconoce elemento, solo la etiqueta

Pos: 323

Val: 7

getElementById no reconoce elemento, solo la etiqueta

Publicado por Valery (4 intervenciones) el 26/05/2020 18:35:19

Hola a todos!

soy nuevo en js. y en VSC no consigo que getElementById obtenga el elemento, en su lugar, obtiene info de la propia etiqueta.

no sé en que me he equivocado.

sin embargo cuando hago una alerta sin buscar una variable, me sale perfectamente.

la primera alerta me sale así:
[object HTMLParagraphElement]

la segunda alerta me sale correctamente:
hola

mil gracias de antemano!!

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>test</title>

</head>

<body>

    <h1>probando si funciona</h1>

    <p id="prueba">intentando</p>

    <script>

        var nota = document.getElementById("prueba");

        alert(nota);

        var aviso = "hola"

        alert(aviso);

    </script>

</body>

</html>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 266

Val: 9

getElementById no reconoce elemento, solo la etiqueta

Publicado por Sergio (5 intervenciones) el 26/05/2020 18:50:20

Prueba con esto:

<h1>probando si funciona</h1>

<p id="prueba">intentando</p>

<script>

var nota = document.getElementById("prueba").innerHTML;

alert(nota);

var aviso = "hola"

alert(aviso);

</script>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 323

Val: 7

getElementById no reconoce elemento, solo la etiqueta

Publicado por Valery (4 intervenciones) el 26/05/2020 19:05:07

si funciona con ese añadido de .innerHTML;

Gracias

pero no entiendo porqué tengo que usar ese añadido.

en ningún tutorial veo que pase lo mismo, que a mí.

no lo comprendo.

Valora esta respuesta

Comentar

Pos: 266

Val: 9

getElementById no reconoce elemento, solo la etiqueta

Publicado por Sergio (5 intervenciones) el 26/05/2020 19:26:48

Cuando llamas desde un javascript por lo general lo toma como objecto
innerhtml es para inyectar en el Html
la diferencia es k tu lo declaras y lo toma azi.

Valora esta respuesta

Comentar

Pos: 323

Val: 7

getElementById no reconoce elemento, solo la etiqueta

Publicado por Valery (4 intervenciones) el 26/05/2020 23:22:56

el innerHTML solo funciona si el script está en la misma hoja de html, pero si traigo las funciones desde otra hoja de javascript, no me funciona y me sigue saliendo el mensaje de alerta así:

alerta:
[object HTMLParagraphElement]

no comprendo por qué.

gracias por la ayuda Sergio.

si alguien tiene idea, se los agradecería, llevo una semana. jajaj

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

getElementById no reconoce elemento, solo la etiqueta

Publicado por joel (895 intervenciones) el 27/05/2020 09:41:15

Es muy extraño esto que te pasa... nos puedes mostrar el código que utilizas?

Valora esta respuesta

Comentar

Pos: 323

Val: 7

getElementById no reconoce elemento, solo la etiqueta

Publicado por Valery (4 intervenciones) el 27/05/2020 11:34:25

hola,

te pongo la hoja html y luego la hoja aparte de js.

hay una alert(uno) que cuando se activa me sale con el siguiente mensaje (lo he adjuntado en una imagen).

[object HTMLButtonElement]

si pongo en var uno = document.getElementById("uno").innerText; o .innerHTML; el aviso sale correctamente, pero en el evento siguiente que se muestra, no funciona porque puse el innerText o innerHTML, sin ellos, sin realiza el evento normal.

//eventos

uno.onclick = function(e){

    resultado.textContent = resultado.textContent + "1"

ya me dirás, mil gracias.

html:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="estilo.css">

    <title>Calculadora</title>

</head>

<body>

    <h1>Calculadora</h1>

    <h3><em>Entra tus números</em></h3>

    <!--tabla de números-->

<div id="container">

    <table class="result">

        <tr>

            <td colspan="3"><span id="resultado"></span></td>

        </tr>

    </table>

    <table class="caja" id="tabla1">

        <tr class="lista1">

            <td><button id="nueve">9</button></td>

            <td><button id="ocho">8</button></td>

            <td><button id="siete">7</button></td>

        </tr>

    </table>

     <table class="caja" id="tabla2">

         <tr class="lista2">

            <td><button id="seis">6</button></td>

            <td><button id="cinco">5</button></td>

            <td><button id="cuatro">4</button></td>

        </tr>

     </table>

     <table class="caja" id="tabla3">

        <tr class="lista3">

            <td><button id="tres">3</button></td>

            <td><button id="dos">2</button></td>

            <td><button id="uno">1</button></td>

        </tr>

    </table>

     <table class="caja" id="tabla4">

            <tr class="lista4">

                <td><button id="menos">-</button></td>

                <td><button id="cero">0</button></td>

                <td><button id="mas">+</button></td>

        </tr>

    </table>

    <table class="caja" id="tabla5">

        <tr class="lista5">

            <td><button id="igual">=</button></td>

            <td><button id="reseteo">C</button></td>

        </tr>

    </table>

</div>

<br><br>

<script src="function.js"></script>

</body>

</html>

//variables

var nueve = document.getElementById("nueve");

var ocho = document.getElementById("ocho");

var siete = document.getElementById("siete");

var seis = document.getElementById("seis");

var cinco = document.getElementById("cinco");

var cuatro = document.getElementById("cuatro");

var tres = document.getElementById("tres");

var dos = document.getElementById("dos");

var uno = document.getElementById("uno");

var cero = document.getElementById("cero");

var menos = document.getElementById("menos");

var mas = document.getElementById("mas");

var resultado = document.getElementById("resultado");

var reseteo = document.getElementById("reseteo");

var igual = document.getElementById("igual");

alert(uno);

//eventos

uno.onclick = function(e){

    resultado.textContent = resultado.textContent + "1"

dos.onclick = function(e){

    resultado.textContent = resultado.textContent + "2"

tres.onclick = function(e){

    resultado.textContent = resultado.textContent + "3"

cuatro.onclick = function(e){

    resultado.textContent = resultado.textContent + "4"

cinco.onclick = function(e){

    resultado.textContent = resultado.textContent + "5"

seis.onclick = function(e){

    resultado.textContent = resultado.textContent + "6"

siete.onclick = function(e){

    resultado.textContent = resultado.textContent + "7"

ocho.onclick = function(e){

    resultado.textContent = resultado.textContent + "8"

nueve.onclick = function(e){

    resultado.textContent = resultado.textContent + "9"

cero.onclick = function(e){

    resultado.textContent = resultado.textContent + "0"

Captura-de-pantalla-2020-05-27-a-las-11.24.49

Valora esta respuesta

Comentar

Pos: 1

Val: 3.506

getElementById no reconoce elemento, solo la etiqueta

Publicado por joel (895 intervenciones) el 27/05/2020 15:15:39

Hola Valeri, intento explicarte...

Esto es un objeto:

document.getElementById("uno")

Esto también es un objeto:

x={value:"casa"}

Si cualquier de los dos, hacer un alert() te dira que son objetos!!!

Un objeto, puedes tener propiedades... por ejemplo, puedes obtener la propiedad "value", "innerHTML", "innerText", ... dependiendo de cada tipo de objeto.

document.getElementById("uno").value

x.value

Estas propiedades te devolverán una cadena si existe el objeto, y si el objeto tiene esa propiedad claro.

No se si te ha quedado claro...

Valora esta respuesta

Comentar

necesito clases particulares para aprender a terminar un proyecto

cookie con header