Question

我正在研究一个WordPress插件，该插件可将woocommerce扩展到彩票网站。

这里的目标是让用户选择6个数字。这些数字中的5个将来自一组编号为1-70的黑色按钮，然后，最后一个第六个编号来自一组编号为1-25的绿色按钮。

这是numberPicker插件创建的前端： https://i.imgur.com/IHlUUbz.png

单击的每个按钮的值将分别插入6个框中。

我能够使1-70黑色按钮正常工作，并且用户选择的5个数字已成功填充到接收它们的前5个输入框中。

但是，我遇到的问题是我仍然无法弄清为什么第二组绿色的25个数字不能正常工作，因为我使用了与使第一组正常工作时完全相同的策略，但是仍然没有正在工作。

这是HTML。它与一些PHP混合使用，因为这是WordPress插件。用于选择第六个数字的绿色框。

<?php
    $i=1;
    while ( $i<=25 ) {
    $new_numsec = $i++ ?>
    <button id="<?php echo $new_numsec ?>" type="button" class="button-numsec" value="<?php echo $new_numsec ?>"><?php echo $new_numsec ?></button><?php
    };
?>

输入表单，主要焦点是最后一个（＃box6）

<form id="number_inputs">
    <input type="number" id="box1" class="num" value="" disabled> 
    <input type="number" id="box2" class="num" value="" disabled>
    <input type="number" id="box3" class="num" value="" disabled>
    <input type="number" id="box4" class="num" value="" disabled>
    <input type="number" id="box5" class="num" value="" disabled>
    <input type="number" id="box6" class="num sec" value="" disabled>
</form>

选择按钮并将其放入变量

const buttonClickedWav = document.querySelectorAll('.button-numsec');

选择HTML输入框，然后将其放入变量sixVal

const sixthVal = document.querySelector('#box6');

将变量SixVal连接到所选HTML输入框（＃box6）并连接到前端的按钮上

sixthVal.value = 0;

检查用户是否单击了按钮，然后发出一个事件，该事件的目标是所单击的数字的确切值

for (let i in buttonClickedWav) {
        buttonClickedWav[i].addEventListener('click', event => {
            event.preventDefault();
            updateDisplayWav(event.target.value);
      });
 };

检查sixVal的值是否为0，以便用用户单击的按钮在输入框中填充用户的值，然后单击几则消息以指导用户进行到底和下一步。

function updateDisplayWav(digitWav) {
    if (sixthVal.value == 0 ) {
        sixthVal.value = digitWav;
        msgBig.innerText = "*Now you can proceed to checkout lottery ticket!";
} else {
    msgBig.innerText = "*Choose your sixth playing number!";
}
};

我需要使addEventListener在一组HTML按钮上工作的帮助

0 个答案: