JavaScriptでクリックされた要素のindexを取得したい

[code]

    <ul>
        <li>チョコレート</li>
        <li>バニラ</li>
        <li>ストロベリー</li>
        <li>バナナ</li>
    </ul>
    
[/code]

上記の`<li>`がクリックされたとき、liが何番目であるかJavascript（jQueryは使わない）で取得したいです。  
方法ご存知のかたがおられましたらご教示お願いします。




**li** の配列の何番目に **event.target** と一致する内容が存在するか検索することで取得できます。  
チョコレートは0番目になるので、1番目としたい場合は、取得した値に+1してください。

[code]

    function chooseItem(event) {
      var ul = event.target.parentNode;
      var li = ul.querySelectorAll("li");
      console.log(Array.prototype.indexOf.call(li, event.target));
    }
[/code]

[code]

    <ul onclick="chooseItem(event)">
      <li>チョコレート</li>
      <li>バニラ</li>
      <li>ストロベリー</li>
      <li>バナナ</li>
    </ul>
[/code]

