Problem with message programmed in JavaScript

Question

Problem with message programmed in JavaScript

Navigation

#1 by (1 votes)

0

Well my problem is that I have this function in 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;

    });
}());

and the HTML is this:

<!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>

My problem is that when I give it to calculate, the message only appears a thousandth of a second and disappears. I do not know how to do so that the message is maintained.

Could it be that the function because it is still running stops showing?

javascript html

asked by DagsDroid 27.09.2017 в 01:19

source

1 answer

How to remove the json from the subscribe to pass it to an object? Problems with php when creating a CakePhp 3 project with composer

score 1 · Accepted Answer

The page is refreshing because by default the button submit to the form. Change the button for a input so you do not submit and refresh the page:

(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>