JavaScript表单提交需求：点击提交按钮仅修改对应participant-box

问题分析 #

你的代码存在三个核心问题：

• 表单名称不匹配：JS中尝试获取name="vote-form"的表单，但HTML里表单的name是form-votacao，导致无法绑定事件
• 无法定位目标容器：表单的onsubmit事件中this指向整个表单，querySelector(".participant-box")只会选中第一个匹配的容器，无法区分是哪个按钮触发的提交
• 未阻止默认提交行为：点击提交按钮会触发页面刷新，样式修改的效果会立刻消失

修正后的代码 #

HTML（注意修正重复id问题，多个容器不能用相同id）

<form class="form-votacao" name="form-votacao">
  <div class="participant-box">
    <img src="../images/blank.png" alt="blank" />
    <p class="name">participant name 1</p>
    <p class="category">participant category 1</p>
    <p class="talent-info">talent info 1</p>
    <input
      type="submit"
      value="VOTAR"
      name="vote-button"
      class="vote-button"
    />
  </div>
  <div class="participant-box">
    <img src="../images/blank.png" alt="blank" />
    <p class="name">participant name 2</p>
    <p class="category">participant category 2</p>
    <p class="talent-info">talent info 2</p>
    <input
      type="submit"
      value="VOTAR"
      name="vote-button"
      class="vote-button"
    />
  </div>
</form>

JavaScript

// 正确获取表单元素
const form_votacao = document.forms["form-votacao"];

form_votacao.onsubmit = function (event) {
  // 阻止表单默认提交行为，避免页面刷新
  event.preventDefault();
  
  // 通过event.submitter获取触发提交的按钮，再找到其所在的participant-box
  const targetBox = event.submitter.closest(".participant-box");
  
  // 修改目标容器的样式
  targetBox.style.background = "green";
};

关键说明 #

1. 修正表单选择器：确保JS获取表单的name和HTML中一致，才能正确绑定事件
2. 阻止默认行为：使用event.preventDefault()避免页面刷新，保留样式修改效果
3. 定位目标容器：event.submitter指向触发提交的按钮，closest(".participant-box")会向上查找最近的父级容器，精准定位到按钮所在的div，即使有多个participant-box也能正确区分

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