Question

我在表格中有这个表格行

<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>

当我点击add-to-cart时，我会提醒数据ismall，imedium，ilarge和ixlarge内的数据。但我无法使用JavaScript获得价值。

我该怎么做？

我的 JavaScript ：

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

Answer 1

代码正常工作。但是，您应该使用Number()函数将字符串转换为数值。例如，

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

HTML + Javascript fiddle here 。

我建议您将javascript放在页面底部而不是<head>标记中。例如。在关闭</body>标记之前放置javascript。

Answer 2

我建议您使用按钮进行点击，但无论如何这不是问题。我还建议您addEventListener参加活动。你的javascript

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

http://jsfiddle.net/0w3j94sf/1/

这有效，但我认为你的代码也应该有用。你的输入中有一个占位符，巫婆是0.这不是一个值。如果单击该按钮并且未设置输入值，则警报结果将为空。如果您不具有默认值，则必须在输入上设置属性value="0"。

Answer 3

它可以很好地检查我的小提琴

Js Fiddle

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);
}

如果字段为空，则会显示空白警告

Answer 4

试试这个live DEMO

<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>

的js

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);

单击div后获取输入值

4 个答案: