javascript拼接value提交跳转

有HTML如下， span继承class作为页面跳转的按钮存在，想无论select的value有无改变时都能拼接后传入input提交，

<form action="" method="post" id="form" data-ajax="false" enctype="multipart/form-data">
<select id="number1">
  <option value="">ー</option>
  <option value="1">1</option>
  <!-- 其他选项省略 -->
  <option value="10">10</option>
</select>
<select id="number2">
  <option value="">ー</option>
  <option value="1">1</option>
  <!-- 其他选项省略 -->
  <option value="10">10</option>
</select>
<input type="hidden" id="number" name="number" value="">
<span class="request span" data-transition="slide" data-ajax="false">一个span</span>
</form>

因为看起来onchange属性要在有值改变这种情况下才会生效，所以尝试这样

const number1 = document.getElementById("number1");
const number2= document.getElementById("number2");
const number= document.getElementById("number");
const Aspan= document.getElementByClassName("request ");

Aspan.addEventListener("click", () => {

  const value1 = number1 .value;
  const value2 = number2.value;

  const CosValue= `${value1}${value2}`;

  number.value = CosValue;
});

不过尝试后无效，难道是span不能附加click效果？
还请指教一个有效的解决办法，非常感谢

getElementByClassName少了个s，==》getElementsByClassName，而且参数多了个空格，注意getElementsByClassName返回的是dom数组，addEventListener是dom的方法，dom数组没有此方法

<form action="" method="post" id="form" data-ajax="false" enctype="multipart/form-data">
    <select id="number1">
        <option value="">ー</option>
        <option value="1">1</option>
        <!-- 其他选项省略 -->
        <option value="10">10</option>
    </select>
    <select id="number2">
        <option value="">ー</option>
        <option value="1">1</option>
        <!-- 其他选项省略 -->
        <option value="10">10</option>
    </select>
    <input type="hidden" id="number" name="number" value="">
    <span class="request span" data-transition="slide" data-ajax="false">一个span</span>
</form>
<script>
    const number1 = document.getElementById("number1");
    const number2 = document.getElementById("number2");
    const number = document.getElementById("number");
    const Aspan = document.getElementsByClassName("request")[0];//获取dom
    //const Aspan = document.querySelector(".request");//或者这样直接获取第一个出现的包含request样式的dom


    Aspan.addEventListener("click", () => {

        const value1 = number1.value;
        const value2 = number2.value;

        const CosValue = `${value1}${value2}`;

        number.value = CosValue;
    });


    //这里初始化下number的值，要不上面的箭头函数用变量保存起来调用一次，要不不点击span，number不会根据select的值初始化
    number.value = `${number1.value}${number2.value}`;

</script>

因为 getElementsByClassName 拼错了 少了个s ，并且 类名 是个伪数组，需要 以下标获取 。还有就是 span 少个 Aspan的类名

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <form action="" method="post" id="form" data-ajax="false" enctype="multipart/form-data">
      <select id="number1">
         <option value="">ー</option>
         <option value="1">1</option>

         <option value="10">¥10</option>
      </select>
      <select id="number2">
         <option value="">ー</option>
         <option value="1">1</option>

         <option value="10">10</option>
      </select>
      <input type="hidden" id="number" name="number" value="">
      <span class="request num Aspan" data-transition="slide" data-ajax="false">一个span</span>
   </form>
</body>
<script>
   const number1 = document.getElementById("number1");
   const number2 = document.getElementById("number2");
   const number = document.getElementById("number");
   const Aspan = document.getElementsByClassName("Aspan")[0];

   Aspan.addEventListener("click", () => {
    
      const value1 = number1.value;
      const value2 = number2.value;

      const CosValue = `${value1}${value2}`;
      console.log(CosValue)
      number.value = CosValue;
   });

</script>

</html>

仅供参考：
您的代码中有一个拼写错误，应该是 getElementsByClassName 而不是 getElementByClassName。

另外，您需要在每次下拉列表值发生更改时更新隐藏输入框的值，而不仅仅是在 span 元素被单击时更新它。

以下是一种可以实现您的要求的代码示例：

<form action="" method="post" id="form" data-ajax="false" enctype="multipart/form-data">
  <select id="number1">
    <option value="">ー</option>
    <option value="1">1</option>
    <option value="10">10</option>
  </select>
  <select id="number2">
    <option value="">ー</option>
    <option value="1">1</option>
    <option value="10">10</option>
  </select>
  <input type="hidden" id="number" name="number" value="">
  <span class="request span" data-transition="slide" data-ajax="false">一个span</span>
</form>

const number1 = document.getElementById("number1");
const number2 = document.getElementById("number2");
const number = document.getElementById("number");
const Aspan = document.getElementsByClassName("request")[0];

number1.addEventListener("change", updateNumber);
number2.addEventListener("change", updateNumber);

Aspan.addEventListener("click", () => {
  const value1 = number1.value;
  const value2 = number2.value;

  const CosValue = `${value1}${value2}`;

  number.value = CosValue;
  document.getElementById("form").submit();
});

function updateNumber() {
  const value1 = number1.value;
  const value2 = number2.value;

  const CosValue = `${value1}${value2}`;

  number.value = CosValue;
}

这个代码在每次下拉列表值发生变化时，都会调用 updateNumber 函数来更新隐藏输入框的值，然后当 span 元素被单击时，提交表单。

但看代码来说，语法有误！

img


此处是根据class进行获取，所以应为 getElementsByClassName， 你少写了一个 s

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632