獲取輸入的值之後，DIV是點擊

-1

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

來源

2014-10-05 game on

div ??你爲什麼不使用按鈕？ – 2014-10-05 07:59:15

@BhaveshGangani讓我可以更容易地設計風格。 – 2014-10-05 08:00:47

你也可以設計風格的按鈕。爲了達到這種目的，推薦使用一個按鈕。 – 2014-10-05 08:07:54

代碼的工作是正確的。但是，您應該使用函數將字符串轉換爲數字值。例如，

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

HTML +的Javascript fiddle here。

我建議你把你的javascript放在頁面的底部而不是<head>標籤。例如。在關閉</body>標記之前放入javascript。

來源

2014-10-05 08:12:48

我建議你使用按鈕進行點擊，但無論如何這不是問題。此外，我再次建議你到addEventListener的事件。您的JavaScript

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

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

這樣的作品，但你的代碼，我想也應該是工作。你的輸入中有一個佔位符，女巫是0.而這不是一個值。如果您單擊該按鈕並且未設置輸入值，則警報結果將爲空。如果您不想具有默認值，則必須在輸入上設置屬性value="0"。

來源

2014-10-05 08:16:11 siropo

它工作正常，檢查我的小提琴

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

如果字段爲空，它會給空白警報

來源

2014-10-05 08:16:19

試試這個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);

來源

2014-10-05 08:31:28

獲取輸入的值之後，DIV是點擊

回答

相關問題