通过ClassName进行表单验证-不触发

Question

我正在尝试为一个类项目创建一个订单表单，该项目有6个项目，每个项目都需要输入数量。我将输入类型设置为数字，并在单击该字段时显示滚动条，但我还想确保用户不能手动输入超过10的数字。我意识到我们不能使用“ getElementById”，因为id必须是唯一的，并且只会触发在具有该ID的第一个元素上。我一直在玩getElementByClassName，但它根本没有触发。表中的所有输入都分配了相同的类，名称和iD。有什么建议/想法为什么不起作用？

JavaScript：

var quant = document.getElementsByClassName("Quantity");
quant.addEventListener("blur", checkquant);
var message = document.getElementsByClassName("quantmsg");
 function checkquant() {                                                       
      if (quant < 11) {    
        message.textContent = "";                        
    } else {                                                                          
        message.textContent = "Maximum Quantity of 10";
    }                                                                                 
    }

HTML（表格中6个输入样本中的一个）：

    <tr>
    <td><input type="checkbox" name="DesktopPC" value="DesktopPC">
        <label for="DesktopPC">Desktop PC</label>
    </td>
    <td><label for="QuantityD">Quantity:</label>
        <input class="Quantity" type="number" value="0" min="0" max="10" onfocus="inputfocus();">
        <div class="quantmsg"></div>
    </td>
</tr>