Javascript 单击div后获取输入值

我把这一排桌子放在桌子上

<tr>
    <th>
        <input type="text" id="ismall" maxlength="2" size="2" placeholder="0">
    </th>
    <th>
        <input type="text" id="imedium" maxlength="2" size="2" placeholder="0">
    </th>
    <th>
        <input type="text" id="ilarge" maxlength="2" size="2" placeholder="0">
    </th>
    <th>
        <input type="text" id="ixlarge" maxlength="2" size="2" placeholder="0">
    </th>
    </tr>
    <tr>
        <th colspan="4" style="padding: 0px">
        <div class="add-to-cart" onclick="addToCart()">Add to pizza cart</div>
    </th>
    </tr>
</tr>

---

代码工作正常。但是，您应该使用

Number（）

函数将字符串转换为数值。例如

function addToCart(){
    alert(Number(document.getElementById('ismall').value));
}

HTML+Javascript

---

我建议您将javascript放在页面底部，而不是

标记中。例如，在关闭标签之前放置javascript。

我建议您使用按钮进行单击，但无论如何这不是问题所在。此外，我再次向您推荐事件的

addEventListener

。你的javascript

document.getElementsByClassName('add-to-cart')[0].addEventListener('click', function() {
  alert(document.getElementById('ismall').value);
})

---

这是可行的，但我认为你的代码也应该是可行的。您的输入中有一个占位符，它是0。这不是一个价值观。如果您单击按钮，但未设置输入值，则警报结果将为空。如果不想使用默认值，则必须在输入时设置属性

value=“0”

。

它工作正常请检查我的小提琴

如果字段为空，则会发出空白警报

---

分区？？为什么不使用button？？？@BhaveshGangani，这样我可以更轻松地设置样式。您也可以设置按钮样式。。甚至一个按钮也被推荐用于这种用途。使用一个带有提交侦听器的表单，它将使收集输入值和排序变得非常容易。此外，如果客户端脚本失败，您可以回退到标准表单行为。不管怎样，您都必须将数据发送到服务器，一个表单可以简化这一过程。当我将它放在普通html文件中进行测试时，它正在工作

document.getElementsByClassName('add-to-cart')[0].addEventListener('click', function() {
  alert(document.getElementById('ismall').value);
})

function addToCart() {

    a = document.getElementById('ismall').value
    b = document.getElementById('imedium').value
    c = document.getElementById('ilarge').value
    d = document.getElementById('ixlarge').value

    alert(a + ' ' + b + ' ' + c + ' ' + d);
}

<form id=pizzaForm >
        <tr>
        <th>
            <input type="text" id="ismall" maxlength="2" size="2" placeholder="0" autofocus required>
        </th>
        <th>
            <input type="text" id="imedium" maxlength="2" size="2" placeholder="0" required>
        </th>
        <th>
            <input type="text" id="ilarge" maxlength="2" size="2" placeholder="0" required>
        </th>
        <th>
            <input type="text" id="ixlarge" maxlength="2" size="2" placeholder="0" required>
        </th>
        </tr>
        <tr>
            <th colspan="4" style="padding: 0px">
            <input type="submit" value="Add to pizza cart"  id="continue_btn" class="add-to-cart"/>
        </th>
        </tr>
    </tr>
</form>

function addToCart(){
    allIput.forEach( function(e){
       alert(e.value);
    });
}

var allIput =Array.prototype.slice.call(document.querySelectorAll("input[type=text]")),
 highlightForm = document.querySelector("#pizzaForm");

highlightForm.addEventListener('submit',addToCart , false);