show/ hide function in one button (hide_btn)

Question

I have to program an web-app (Mäxle) for an exam and I am a total beginner. Hopefully s.o. can help me with that.

index.html (buttons):

<div id="buttons_container" class="container">
            <div class="row">
                <br>
                <button type="button" id="shuffle_btn" class="btn btn-primary">shuffle</button>

                <button type="button" id="hide_btn" class="btn btn-success">hide / show</button>
            </div>
        </div>

function.js:

function test_shuffle () {

var arr = ["11",
    "21","22",
    "31","32","33","34","35","36",
    "41","42","43","44","45","46",
    "51","52","53","54","55","56",
    "61","62","63","64","65","66"];

var max_index = arr.length -1;

var zufall = Math.floor(Math.random() * max_index) + 1 ;

var final = arr [zufall];

$('#ausgabe_shuffle').html(final);

}

function test_hide () {

$("hide_btn").click(function(){
$("--").hide();
});
}

event.js:

$(document).ready(function() {

$('body').on('click', '#shuffle_btn', function (e) {

    test_shuffle ();

});

$('body').on('click', '#hide_btn', function (e) {
    $("*").html("--");

    test_hide ();

});
});

When I click the hide_btn right now, everthing disappears and this "--" will be displayed. The click works but I want to hide the numbers I got from the array, eg. "32"

Thank you very much in advance

Answer 1

$("*").html("--"); // This overrides all html inside body and prints "--".

You can replace this with

$("#ausgabe_shuffle").toggle(); // This will show or hide your values printed inside #ausgabe_shuffle tag.