JS实现双票务计数器仅单一生效故障排查求助

问题原因 #

1. 儿童计数器DOM的id属性重复：儿童计数的<h2>标签同时写了id="counterKids"和id="k-counter"，一个DOM元素只能声明一个id属性，浏览器仅会识别第一个id，导致JS中document.querySelector('#k-counter')获取到空值，儿童计数器逻辑不生效。
2. 减法逻辑顺序错误：两个计数器的减号事件中，都先执行了updateDisplay()再修改计数数值，会导致点击减号后显示的是修改前的数值，触发显示滞后。
3. jQuery代码写法错误：
   • 引入jQuery的script标签同时写了内部代码，带src属性的script标签内部代码会被浏览器忽略，需要拆分两个script标签
   • jQuery选择器$(#bookbuttonshadow)缺少引号，正确写法为$('#bookbuttonshadow')

修复方案 #

1. 修复儿童计数器h2的id #

把原代码里儿童区域的h2标签：

<h2 id="counterKids" id="k-counter">0</h2>

修改为：

<h2 id="k-counter">0</h2>

如果需要保留counterKids标识，可改用class属性或者data自定义属性，不能重复声明id。

2. 调整减号事件的执行顺序 #

把两个计数器的减号事件逻辑调整为先修改数值，再更新显示，以成人计数器为例修改为：

aMinus.addEventListener("click",()=>{
    if(Acount > 0){
        Acount--;
    }
    updateDisplay();
});

儿童计数器的减号事件也做相同调整即可。

3. 修复jQuery相关代码 #

拆分jQuery引入和业务代码，修正选择器写法：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(() => {
    $('#bookbutton').hover(
        function () {
            $('#bookbuttonshadow').removeClass('hidden');
        }, 
        function () {
            $('#bookbuttonshadow').addClass('hidden');
        }
    );
    console.log('This works');
});
</script>

内容的提问来源于stack exchange，提问作者ckwheatley15