在某些设备上，JavaScript仅在第二次选择之后分配新的文本节点

Question

我写了一个简单的网站，该网站随机显示了150个诗篇中的1个，其中包含来自一小部分图像的随机图像。加载用户有两个选择后，要么随机阅读另一个诗篇（按钮“任何诗篇”），要么自己选择一个（选择元素）。加载随机诗篇的功能正常运行，但是选择按钮在本地服务器上可以正常工作，也可以在我的笔记本电脑上推到github，但是在我的手机和iPad上，只有在您再次选择时才可以工作，所以说您'在诗篇20上，然后选择诗篇83，然后什么都没发生，直到您再次选择诗篇102，然后才加载诗篇83，所以您总是落后一步。

我怀疑这可能与代码无关，尽管如此，这是我的功能。

 const selectPsalm = () => {
    loadingImage();
    let psalms = randomPsalm(psalmsBulk)[1];
    let selectedPsalmIndex = document.getElementById("choose").value;
    let lastIndex = () => {
        if(psalms.indexOf(psalms[selectedPsalmIndex])<10) {
            return 2
        } else if(psalms.indexOf(psalms[selectedPsalmIndex])<100) {
            return 3
        } else return 4
    }
    strHeading = psalms[selectedPsalmIndex].slice(0, psalms[selectedPsalmIndex].indexOf(psalms.indexOf(psalms[selectedPsalmIndex]))+lastIndex());
    strScripture = psalms[selectedPsalmIndex].slice(psalms[selectedPsalmIndex].indexOf(psalms.indexOf(psalms[selectedPsalmIndex]))+lastIndex());
    document.getElementById('heading').innerHTML = strHeading;           
    document.getElementById('psalm').innerHTML = strScripture;     
}```

and these are my event listeners:

  //document.getElementById("random").addEventListener('click', newRandomPsalm);
  //document.getElementById("choose").addEventListener('click', selectPsalm);

  $('document').ready(function(){
    $('#random').on('click', newRandomPsalm);
    $('#choose').on('click', selectPsalm)
  })

I commented out my original js event listeners and changed them for jQuery ones, because I am learning jQuery and wanted to see it in my code, but both sets of statements do exactly the same.

You can see it in action at:

https://psalms.live/

My question is; what is wrong and how to fix it?

Answer 1

事实证明，on（'click'）并不总是适合选择的下拉元素。正确的语法为on（'change'）。