javascript拼接value提交跳转

Question

有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效果？
还请指教一个有效的解决办法，非常感谢

Answer 1

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>