0

Bueno mi problema esta que yo tengo esta función dentro de JavaScript:

(function () {

    var c = document.getElementById("c");
    c.addEventListener('click', function () {

        // VARIABLES QUE CONTROLAN LAS CAJAS DE TEXTO DEL HTML
        var x=document.getElementById("x").value;
        var y=document.getElementById("y").value;
        var z=document.getElementById("z").value;

        //VARIABLE QUE MOSTRARA COMO QUEDARA LA ECUACION...
        // REEMPLAZANDO LAS LETRAS POR VALORES AGREGADOS EN LAS
        // CAJAS DE TEXTO....
        var muestra = "3("+x+")<sup>3</sup>+10("+y+")<sup>2</sup>+"+z;

        document.querySelector('p').innerHTML = muestra;

    });
}());

y el HTML es este:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ecuaci&oacuten</title>
</head>
<body>
    <form action="#" name="frmEcuacion">
        <div>
            <h1>Ecuaci&oacuten</h1>
            <label for="">Escriba los siguientes valores de la ecuacion: 3x<sup>3</sup>+10y<sup>2</sup>+z</label>
            <br><br>
            X: <input type="text" id="x">
            <br><br>
            Y: <input type="text" id="y">
            <br><br>
            Z: <input type="text" id="z">
            <br><br>
            <button id="c">
                Calcular
            </button>
        </div>
    </form>
    <br>
    <div>   
        <p id="ecuacionN"></p>      
    </div>
</body>
<script type="text/javascript" src="js/calcular.js"></script>
</html>

Mi problema es que cuando le doy a calcular, el mensaje solo aparece una milésima de segundo y desaparece. No se como hacer para que el mensaje se mantenga.

¿Puede ser que la función debido a que se sigue ejecutando deja de mostrar?

1
  • 1
    Sería bueno editar tu pregunta y agregues el HTML a cambio de la imagen para poder replicar tu problema.
    – Davlio
    Commented el 26 sept. 2017 a las 23:28

1 respuesta 1

1

La pagina se esta refrescando debido a que por defecto el button hace submit al form. Cambia el button por un input para que no haga submit y refresque la pagina:

(function () {

    var c = document.getElementById("c");
    c.addEventListener('click', function () {

        // VARIABLES QUE CONTROLAN LAS CAJAS DE TEXTO DEL HTML
        var x=document.getElementById("x").value;
        var y=document.getElementById("y").value;
        var z=document.getElementById("z").value;

        //VARIABLE QUE MOSTRARA COMO QUEDARA LA ECUACION...
        // REEMPLAZANDO LAS LETRAS POR VALORES AGREGADOS EN LAS
        // CAJAS DE TEXTO....
        var muestra = "3("+x+")<sup>3</sup>+10("+y+")<sup>2</sup>+"+z;

        document.querySelector('p').innerHTML = muestra;

    });
}());
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ecuaci&oacuten</title>
</head>
<body>
    <form action="#" name="frmEcuacion">
        <div>
            <h1>Ecuaci&oacuten</h1>
            <label for="">Escriba los siguientes valores de la ecuacion: 3x<sup>3</sup>+10y<sup>2</sup>+z</label>
            <br><br>
            X: <input type="text" id="x">
            <br><br>
            Y: <input type="text" id="y">
            <br><br>
            Z: <input type="text" id="z">
            <br><br>
            <input type="button" id="c" value="Calcular" />
        </div>
    </form>
    <br>
    <div>   
        <p id="ecuacionN"></p>      
    </div>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.