Trying to hide an image when website loads, but have a button that shows it

Question

I'm not sure why this isn't working, keep it simple.

I need it to be JQuery as well because this is kind of an exercise I need to do on JQuery

<script>
$(document).ready(function(){
    $(".kuva1").hide()
        });

$(document).ready(function(){
    $("button").click(function(){
        $("#kuva1").fadeIn(5000);
    });
});
</script>

<button type="button">Show Image</button>

<div id="div1">
<img class="kuva1" src="./kuvat/daisy.jpg" style="width:384px;height:216px;">
<div>

Answer 1

Try to use . instead of # since you donot have id but class

$(document).ready(function(){
$("button").click(function(){
    $(".kuva1").fadeIn(5000);
});
});