同ID列点击按钮触发函数仅生效一列的问题排查

错误原因 #

• HTML规范中ID属性必须是唯一的，你当前的代码里两列都使用了相同的hrg、per、jmlh ID。document.getElementById()方法只会返回页面中第一个匹配该ID的元素，所以点击第二列的按钮时，函数仍然在操作第一列的元素，导致第二列没有反应。

修复方案 #

1. 修改HTML结构：将重复ID替换为类名 #

把所有重复的id属性改成class，保证每个元素的标识在局部容器内可区分：

<div class="row">
<!--- column 1 ------> 
    <div class="column nature">
        <div class="content">
            <img src="images/pic.jpg" alt="Jane" style="width:100%">
            <div class="container">
                <p class="title" style="text-align:center;">SCA5-01</p>
                    <div  style="text-align:center;">
                        <div class="hrg" style="font-size:5vw;font-weight:bold;">2000</div> 
                        <div class="per">/500</div>
                    </div>
                <div style="width:100%;margin:0px 5%;display:block;">
                    <div style="font-size:2vw;">
                        <br>Spect :
                        <br>- New
                        <br>- Fresh
                    </div>
                </div>
                <p>
                <div style="width:100%;margin:0px auto;text-align:center;">
                    <input class="jmlh" type="number" value="500" style="width:50%;"> 
                    <button onclick="price(this)">chek</button>
                </div>
                </p>
                <p>
                    <button class="button">Order</button>
                </p>
            </div>
        </div>
    </div>
<!--- column 2 ------>  
        <div class="column nature">
        <div class="content">
            <img src="images/pic.jpg" alt="Jane" style="width:100%">
            <div class="container">
                <p class="title" style="text-align:center;">SCA5-01</p>
                    <div  style="text-align:center;">
                        <div class="hrg" style="font-size:5vw;font-weight:bold;">2000</div> 
                        <div class="per">/500</div>
                    </div>
                <div style="width:100%;margin:0px 5%;display:block;">
                    <div style="font-size:2vw;">
                        <br>Spect :
                        <br>- New
                        <br>- Fresh
                    </div>
                </div>
                <p>
                <div style="width:100%;margin:0px auto;text-align:center;">
                    <input class="jmlh" type="number" value="500" style="width:50%;"> 
                    <button onclick="price(this)">chek</button>
                </div>
                </p>
                <p>
                    <button class="button">Order</button>
                </p>
            </div>
        </div>
    </div>
</div>

2. 更新JS函数：基于当前按钮定位局部元素 #

修改函数，通过传入的按钮元素，找到它所在的.container容器，然后只操作该容器内的元素：

function price(btn){
    // 找到当前按钮所在的容器
    const container = btn.closest('.container');
    // 在容器内查找对应的输入框和显示元素
    const qty = container.querySelector('.jmlh').value;
    const prc = Math.ceil((1000000 / qty)/100)*100;
    container.querySelector('.hrg').innerHTML = prc;
    container.querySelector('.per').innerHTML = "/" + qty;
}

说明 #

• closest('.container')方法会从当前元素向上查找最近的.container父元素，确保我们只操作当前按钮所在列的元素。
• querySelector()在指定容器内查找第一个匹配类名的元素，避免影响其他列的内容。

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