Home / Questions / 20538
Accepted
Máxima Alekz
Asked: 2020-08-15 16:31:18 +0800 CST 2020-08-15 16:31:18 +0800 CST

HTML & JQuery dynamic page

  • 772

I have the following code:

   <div class="container" style="text-align:center;">
        <h1 class="text-center">Calculate Areas!</h1>
        <div class="init">
            <select name="area" class="form-control">
                <option value="cuadrado">Cuadrado</option>
                <option value="rectangulo">Rectángulo</option>
                <option value="circulo">Circulo</option>
                <option value="triangulo">Triángulo</option>
            </select>
            <button type="button" class="form-control btn btn-primary">Move it!</button>
        </div>
        <div class="meth1" style="display:none;">
            <h3>Area de un cuadrado</h3>
            <input class="form-control" type="number" id="m1">
            <button type="button">Calcular</button>
        </div>
        <div class="meth2" style="display:none;">
            <h3>Area de un rectángulo</h3>
            <input class="form-control" type="number" id="m2">
            <input class="form-control" type="number" id="m2">
            <button type="button">Calcular</button>
        </div>
        <div class="meth3" style="display:none;">
            <h3>Area de un círculo</h3>
            <input class="form-control" type="number" id="m3">
            <button type="button">Calcular</button>
        </div>
        <div class="meth4" style="display:none;">
            <h3>Area de un triángulo</h3>
            <input class="form-control" type="number" id="m4">
            <input class="form-control" type="number" id="m4">
            <button type="button">Calcular</button>
        </div>
    </div>

What I want is that the div ( meth1, meth2, meth3and meth4) appear dynamically DEPENDING on the selection made with the SELECTone that is seen in the div ( init), but what I want is that as long as nothing has been selected in the SELECT, the code cannot be visible or "not yet formed".

I can leave it with the CSS inline of display:none;or display:block;but anyone can easily change the visibility, plus the page load is higher because it loads all four divs.

Is it possible to create the code directly from jQuery? So that the div is only displayed meth1if it SELECTis "Square" in it, it is displayed meth2if it SELECTis "Rectangle" in it, and so on. I've read something like that about createElementbut I don't know.

javascript

1 Answers

  1. Best Answer

    If your concern is that the user doesn't see the contents of the divbefore selecting anything in the select, then not only would I not recommend having them with display:noneand then changing it to display:block(something you yourself indicate you don't want), but I also wouldn't recommend I would recommend what you've been looking for to create the elements dynamically with JavaScript/jQuery with createElement.

    The reason is similar: it would imply that the content is available somewhere in the JS files and the user could also see it by searching a bit. You could obfuscate it to make it harder to find/read, but it would still be available within the downloaded files linked by the page.

    For what you want, I would almost recommend you to use AJAX (directly with the function $.ajaxor with getor load). The idea would be to put the contents of all the divs (meth1, meth2, meth3 and meth4) in separate files (eg meth1.html, meth2.html, meth3.html and meth4.html) and delete them div(leave only one empty):

    <div class="container" style="text-align:center;">
    <h1 class="text-center">Calculate Areas!</h1>
    <div class="init">
        <select name="area" class="form-control">
            <option value="cuadrado">Cuadrado</option>
            <option value="rectangulo">Rectángulo</option>
            <option value="circulo">Circulo</option>
            <option value="triangulo">Triángulo</option>
        </select>
        <button type="button" class="form-control btn btn-primary">Move it!</button>
    </div>
    <div id="meth"></div>
</div>

    And then add a change event handler for selectwhich it will read the contents of the appropriate file and load it into the new divone you created. For example something like this (eye, I haven't tried it and it may contain bugs):

    $("select[name=area]").on("change", function() { 
    var url = "";

    // decidimos la url a cargar dependiendo del valor del select
    switch ($(this).val()) {
        case "cuadrado":   url = "meth1.html"; break;
        case "rectangulo": url = "meth2.html"; break;
        case "circulo":    url = "meth3.html"; break;
        case "triangulo":  url = "meth4.html"; break;
    }

    // cargamos la url en el div
    $("#meth").load(url);
});
    • 6