Estoy tratando de crear un sitio web que muestre el poder de CSS y JS. La parte CSS parece estar funcionando bien, pero la parte JS no. Estoy tratando de cambiar el texto "Hola mundo" presionando un botón. Sin embargo, cada vez que presiono el botón, no hace nada.

Intenté arreglar mi etiqueta, probar diferentes controladores de eventos, poner el resultado en una función, luego eliminarlo de la función, mover mi script directamente al HTML y usar window.onload pero nada de eso funciona.

<head>
        ><link rel="stylesheet" type="text/css" href="mystyle.css">
        ><script type="text/javascript" src="../mybutton.js"></script>
    </head>
<p id="gold">Hello World</p>
<button type="button" id="jsClick">Don't Click<button>
<button type="button" id="jsHeal">Heal My World<button>

Js:

window.onload = function() {
    document.getElementById("jsClick") = function()>>{document.getElementById("Gold").innerHTML = "Please don't click";};
    document.getElementById("jsHeal") = function()>>{document.getElementById("Gold").innerHTML = "Hello World"};
}

Mi resultado esperado sería hacer clic en el botón y cambiar el texto de mi párrafo. El resultado real es que todo el HTML y CSS se carga como de costumbre, pero cuando hago clic, no sucede nada. Editar: he intentado todas las respuestas. Creo que algo está mal con la ejecución de JavaScript, ya que incluso programar el JavaScript directamente en el HTML no funciona.

1
JSScratchDouble 29 oct. 2019 a las 22:48

4 respuestas

La mejor respuesta

Hay un par de problemas:

  1. Las identificaciones no coinciden; Gold no es gold
  2. No es así como inicializa una función, elimine el >>
  3. No puede asignar un valor al valor de retorno de una función (document.getElementById("jsClick") = no funciona, no puede asignar valores de esta manera); probablemente desee configurar el onclick propiedad de esa función.
  4. No cerró la etiqueta <button>.

Aquí hay un ejemplo práctico de lo que ha proporcionado:

<head>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        <script type="text/javascript" src="../mybutton.js"></script>
    </head>
<p id="gold">Hello World</p>
<button type="button" id="jsClick">Don't Click</button>
<button type="button" id="jsHeal">Heal My World</button>
<script type="text/javascript">
window.onload = function() {
    document.getElementById("jsClick").onclick = function(){document.getElementById("gold").innerHTML = "Please don't click";};
    document.getElementById("jsHeal").onclick = function(){document.getElementById("gold").innerHTML = "Hello World"};
}
</script>
2
user1538301 29 oct. 2019 a las 19:55
<button type="button" id="jsClick" onclick="changeMe()">Don't Click</button>

function changeMe() {
const myButton = document.getElementById("jsClick");
myButtoon.innerText = "Some random text"
}

O puede seleccionar su elemento con DOM y agregar un detector de eventos en él, un detector de eventos de clic que activa una función que hace lo anterior. Espero eso ayude

1
Andrei Sandica 29 oct. 2019 a las 19:55

Se agregó una función llamada change () que cambia el texto del párrafo a hello world usando un evento onClick.

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script type="text/javascript" src="../mybutton.js"></script>
</head>


<p id="gold">Hello World</p>
<button type="button" id="jsClick">Don't Click<button>
<button type="button" onclick="change()" id="jsHeal">Heal My World<button>



<script>

function change()
{
document.getElementById("gold").innerHTML="Hello World";
}


</script>

PD. muchos errores en su código deberían considerar limpiar eso

2
Omi in a hellcat 29 oct. 2019 a las 19:58

Los identificadores y las clases distinguen entre mayúsculas y minúsculas en HTML y Javascript, por lo tanto, gold no es igual a Gold

1
Chris Oliver 29 oct. 2019 a las 20:07