Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: MA40 en 5 Julio 2021, 12:10 pm



Título: [Duda] Parámetros de una función javascript
Publicado por: MA40 en 5 Julio 2021, 12:10 pm
Hola.

Debe de ser algo muy elemental, pero ahora no caigo.

Tenemos este código HTML con una función javascript HolaMundo:

Código
  1. <!DOCTYPE html>
  2.  <head>
  3.    <script type="text/javascript">
  4.    function HolaMundo(parametroMundo) {
  5.      var variableHola = "Hola";
  6.      alert(variableHola + " " + parametroMundo);
  7.    }
  8.    </script>
  9.  </head>
  10.  <body>
  11.    <input type="button" value="Hola mundo" onclick="HolaMundo(123)">
  12.  </body>
  13. </html>

Introduciendo 123 como parámetro SÍ FUNCIONA, pero si en lugar de poner 123, ponemos "mundo", NO FUNCIONA.

Código
  1. <!DOCTYPE html>
  2.  <head>
  3.    <script type="text/javascript">
  4.    function HolaMundo(parametroMundo) {
  5.      var variableHola = "Hola";
  6.      alert(variableHola + " " + parametroMundo);
  7.    }
  8.    </script>
  9.  </head>
  10.  <body>
  11.    <input type="button" value="Hola mundo" onclick="HolaMundo("mundo")">
  12.  </body>
  13. </html>

¿Hay algo que estoy haciendo mal? ¿Es un error mío de concepto?

Gracias y un saludo.


Título: Re: [Duda] Parámetros de una función javascript
Publicado por: MA40 en 5 Julio 2021, 12:24 pm
Y sin embargo así, SÍ FUNCIONA:

Código
  1. <!DOCTYPE html>
  2.  <head>
  3.    <script type="text/javascript">
  4.    function HolaMundo(parametroMundo) {
  5.      var variableHola = "Hola";
  6.      alert(variableHola + " " + parametroMundo);
  7.    }
  8.    </script>
  9.    <script type="text/javascript">
  10.    function HolaMundoPasoIntermedio() {
  11.      HolaMundo("mundo");
  12.    }
  13.    </script>
  14.  </head>
  15.  <body>
  16.    <input type="button" value="Hola mundo" onclick="HolaMundoPasoIntermedio()">
  17.  </body>
  18. </html>

No tiene mucho sentido ¿no? :huh:

Un saludo.


Título: Re: [Duda] Parámetros de una función javascript
Publicado por: #!drvy en 5 Julio 2021, 12:24 pm
Usas comillas dobles tanto para el html como para el JS. Eso causa un escape y la palabra "mundo" queda como referencia en vez de string.

O usa comillas simples, o escapas las dobles (recomiendo lo primero). Ese problema no lo tienes con el 123 porque no lo pasas como string.

Usar onclick ya se considera mala practica por lo general. Usa eventos en puro javascript. Igualmente, a no ser que sea 100% necesario, el javascript debe ir al final del body, no en el head.

Esta seria la solución a tu problema:


Código
  1. <input type="button" value="Hola mundo" onclick="HolaMundo('mundo')">


Esto seria usando puro javascript para los eventos:


Código
  1. <input type="button" value="Hola mundo" id="buttonHello">


Código
  1. document.getElementById('buttonHello').addEventListener('click', function() {
  2.    HolaMundo('mundo');
  3. });
  4.  


Todo combinado:

Código
  1.    <head></head>
  2.    <body>
  3.        <input type="button" value="Hola mundo" id="buttonHello">
  4.  
  5.        <script>
  6.                function HolaMundo(parametroMundo) {
  7.                    var variableHola = "Hola";
  8.                    alert(variableHola + " " + parametroMundo);
  9.                }
  10.  
  11.                document.getElementById('buttonHello').addEventListener('click', function() {
  12.                    HolaMundo('mundo');
  13.                });
  14.        </script>
  15.    </body>
  16. </html>
  17.  


https://developer.mozilla.org/es/docs/Web/API/Document/getElementById
https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener


Te recomiendo que revises algun tutorial de javascript ACTUALIZADO (maximo hace 3 años).

Saludos


Título: Re: [Duda] Parámetros de una función javascript
Publicado por: Danielㅤ en 5 Julio 2021, 20:05 pm
Hola, como dice el compañero tenés que escapar tu string, pero puede pasar que en algún momento necesites pasar las comillas dobles como parte del string, en tu caso sería:

Código
  1.    <input type="button" value="Hola mundo" onclick="HolaMundo(\"mundo\")">
  2.  

Y si quisieras pasar las camillas dobles podes hacerlo así:

Código
  1.    <input type="button" value="Hola mundo" onclick="HolaMundo(\"\"mundo\"\")">
  2.  


Saludos