超初心者…[JavaScript」onClickで複数のイベントを発生させる

Question

閲覧いただきありがとうございます。
独学でHTMLとJavaScriptを勉強しだしました！
何を参考とすればいいか、わからなくなり思い切って博識の皆様のお力をお借りしたく質問です。

やりたいこと

ボタンクリックで４つのイベントを起こす。
１.読み込みバーを表示　→OK(proc1)
２. テキスト表示　→OK(text1)
３. 音を鳴らす→OK(audio1)
４. 5秒後にリンク先に飛ぶ　→ボタンを押さずともHTML表示後5秒で飛んでしまう(link1)
５. 画像を表示する　→表示しない(prtsc1)

ヘディングのテキスト

<button onclick="proc1(); text1(); audio1(); link1(); prtsc1();" id=btn1>もっと詳しく</button>
    <audio id="audio">
        <source src="audio/audio.wav" type="audio/wav">
    </audio>

    <script>
        function proc1()
        {
            if(document.getElementById('p1').value <100){
                document.getElementById('p1').value++;
                setTimeout(proc1, 30);
            }
        }
        function text1()
        {
            if(document.getElementById('label').innerHTML = "お待ちください…");

        }
        function audio1()
        {
            if(document.getElementById('audio').play());    
        }

_　　　//リンク表示
_        
        setTimeout (function link1()
        {
            window.location.href='complete.html';
        },5*1000);


_        //画像表示
_
        function prtsc1()
        {
            if(document.getElementById('img').innerHTML);
        }
    </script>

４．５のコードについてヒントを頂戴できないでしょうか。どうぞよろしくお願いいたします！

Answer 1

４. 5秒後にリンク先に飛ぶ　→ボタンを押さずともHTML表示後5秒で飛んでしまう(link1)

setTimeoutが外側にあるので、読み込んだ時に実行されます。
ボタンクリック時に遅らせて実行させたい場合は、link1()の中に setTimeout を記述する必要があります。

function link1() {
  setTimeout (
    function link1() {
      window.location.href='complete.html';
    }
    ,5*1000);
}

関数が入れ子になって読みにくいので、下記のように記述することが多いです

const link = function() {
  window.location.href='complete.html';
}
const link1 = function(){
  setTimeout(link, 5000);
}

５. 画像を表示する　→表示しない(prtsc1)

imgタグで画像は読み込んでおいて、CSSで非表示(display: none)にしておいて、
クリック時に表示させるというのが普通のやり方かと。

<img src="img\img.jpg" id="img" style="display:none">

function prtsc1() {
  document.getElementById('img').style.display ="block";
}

Answer 2

４について、
WindowOrWorkerGlobalScope.setTimeout() - Web API | MDN
setTimeout()にて与える関数の実行を指定ミリ秒遅らせて実行します。

５について、
非表示ではなくHTML要素を削除するという意味でしたら、
Node.removeChild - Web API | MDN
removeChild()を使います。
よくやる手として、

// 親要素が不明、不定の場合の方法
var node = document.getElementById("nested");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}

削除対象の要素を見つけて、その親要素を見つけて、親要素に対して削除対象を削除させるという流れです。