javascriptのclickイベントの発火について

Question

こんばんは。
いつもありがとうございます。

また、行き詰まりましたので、質問させて下さい。

JavaScriptで、clickイベントで発火させるつもりでコードを書いたのですが、
画面を読込した際に、勝手にイベントが発火してしまいます。

色々調べたりしましたが、原因がわかりませんでした。

実現したい仕様は以下の通りです。

①Startをクリック
②テキストの4文字目である1を取得（戻り値として返す）
③Nextをクリック
※この時、ディスプレイに何か入力がある場合とない場合で処理を分けてます。
④②の戻り値を連想配列（オブジェクト）のキーの一部となるように渡して、
連想配列（オブジェクト）を生成

コンソールログを確認すると、連想配列（オブジェクト）の生成はできているようですが、
ロード完了後に勝手に発火し、生成されてしまいます。

稚拙なコードで、見づらい箇所等多いかと思いますが、
解決策をご教示頂ければ幸いです。よろしくお願い申し上げます。

        <div class="containar">
            <div class="textarea" >
                <div class="displayarea" id="input-display"></div>
            </div>
            <div class="input">
                <div id="input-no1">１</div>
                <div id="input-no2">２</div>
                <div id="input-no3">３</div>
                <div id="input-no4">４</div>
                <div id="input-reset">Reset</div>
                <div id="input-no5">５</div>
                <div id="input-no6">６</div>
                <div id="input-no7">７</div>
                <div id="input-no8">８</div>
                <div id="input-start">Start</div>
                <div id="input-no9">９</div>
                <div id="input-no0">０</div>
                <div id="input-no00">００</div>
                <div id="input-minus">―</div>
                <div id="input-next">Next</div>
            </div>
        </div>
        <div class="ul" id="input-choice">
            <div id="navi-no1">No.1</div>
            <div id="navi-no2">No.2</div>
            <div id="navi-no3">No.3</div>
            <div id="navi-no4">No.4</div>
            <div id="navi-no5">No.5</div>
            <div id="navi-no6">Final</div>
        </div>

function userStart(){
    let inputNow = document.getElementById('navi-no1');
    inputNow.style.color = '#14cc80';
    return inputNow.textContent.substring(3,4);
}

let inputStart = document.getElementById('input-start');
inputStart.addEventListener('click',userStart,);

function userNext(a){
    let inputdisplay = document.getElementById('input-display');
    if(inputdisplay.textContent !== ''){
        let no = 'No.'+a;
        console.log(no);
        userInputList[no] = inputdisplay.textContent;
        console.log(userInputList);
        inputdisplay.textContent = '';
    }else {
        let no = 'No.'+a;
        console.log(no);
        userInputList[no] = 'Next';
        console.log(userInputList);
        inputdisplay.textContent = '';
    }
}

let inputNext = document.getElementById('input-next');
inputNext.addEventListener('click',userNext(userStart()));

Answer 1

inputNext.addEventListener('click',userNext(userStart()));

userNext(userStart())は、この行を通った瞬間に実行されてしまいます。

Comments

[peacesign]

いつも教えて頂き、ありがとうございます。
本当に助かってます。

自分でも引き続き色々理解していきますが、また行き詰まってしまったら、よろしくお願い申し上げます。

Answer 2

addEventListenerの第2引数は関数自体を渡す必要があるので、クリックするたびにuserNext(userStart())を実行するなら無名関数にでもしてください。

inputNext.addEventListener( 'click', function() { userNext(userStart()); } );

Comments

[peacesign]

早速ご回答頂き、ありがとうございました。
もっと勉強しようとおもいます。
ありがとうございましたm(_ _)m