輸入類型的onClick函數=「按鈕」不起作用

我有這段代碼，點擊按鈕「獲取更多字段」將創建整個div的副本並創建字段。但是在點擊按鈕時沒有任何事情發生。所有其他按鈕工作正常。不知道我做錯了什麼。感謝您的幫助提前。輸入類型的onClick函數=「按鈕」不起作用

<html> 
<head> 
</head> 
<body> 

<div id="readroot" style="display: none"> 

    <input type="button" value="Remove review" 
     onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br /> 

    <input name="cd" value="title" /> 

    <select name="rankingsel"> 
     <option>Rating</option> 
     <option value="excellent">Excellent</option> 
     <option value="good">Good</option> 
     <option value="ok">OK</option> 
     <option value="poor">Poor</option> 
     <option value="bad">Bad</option> 
    </select><br /><br /> 

    <textarea rows="5" cols="20" name="review">Short review</textarea> 
    <br />Radio buttons included to test them in Explorer:<br /> 
    <input type="radio" name="something" value="test1" />Test 1<br /> 
    <input type="radio" name="something" value="test2" />Test 2 

</div> 

<form method="post" action="index1.php"> 

    <span id="writeroot"></span> 

    <input type="button" id="moreFields" value="Give me more fields!" /> 
    <input type="submit" value="Send form" /> 

</form> 
</body> 
</html> 

<script> 

var counter = 0; 


function moreFields() { 
    counter++; 
    var newFields = document.getElementById('readroot').cloneNode(true); 
    newFields.id = ''; 
    newFields.style.display = 'block'; 
    var newField = newFields.childNodes; 
    for (var i=0;i<newField.length;i++) { 
     var theName = newField[i].name 
     if (theName) 
      newField[i].name = theName + counter; 
    } 
    var insertHere = document.getElementById('writeroot'); 
    insertHere.parentNode.insertBefore(newFields,insertHere); 
} 

window.onload = moreFields; 
</script>

來源

2014-02-26 kirk

在chrome中打開它，右鍵單擊頁面上的任意位置 - >檢查元素，並在打開面板的右下方檢查紅色「x」並單擊它。有沒有錯誤？如果是的話，在這裏分享這些錯誤 – pythonian29033

檢查之前的錯誤。沒有錯誤顯示 – kirk

把你的腳本標籤放在body標籤內 – pythonian29033

你必須改變按鈕的ID是從函數名不同 JSFiddle

var counter = 0; 
 

 

 
function moreFields() { 
 
    counter++; 
 
    var newFields = document.getElementById('readroot').cloneNode(true); 
 
    newFields.id = ''; 
 
    newFields.style.display = 'block'; 
 
    var newField = newFields.childNodes; 
 
    for (var i = 0; i < newField.length; i++) { 
 
    var theName = newField[i].name 
 
    if (theName) newField[i].name = theName + counter; 
 
    } 
 
    var insertHere = document.getElementById('writeroot'); 
 
    insertHere.parentNode.insertBefore(newFields, insertHere); 
 
} 
 

 
window.onload = moreFields();

<div id="readroot" style="display: none"> 
 
    <input type="button" value="Remove review" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /> 
 
    <br /> 
 
    <br /> 
 
    <input name="cd" value="title" /> 
 
    <select name="rankingsel"> 
 
    <option>Rating</option> 
 
    <option value="excellent">Excellent</option> 
 
    <option value="good">Good</option> 
 
    <option value="ok">OK</option> 
 
    <option value="poor">Poor</option> 
 
    <option value="bad">Bad</option> 
 
    </select> 
 
    <br /> 
 
    <br /> 
 
    <textarea rows="5" cols="20" name="review">Short review</textarea> 
 
    <br />Radio buttons included to test them in Explorer: 
 
    <br /> 
 
    <input type="radio" name="something" value="test1" />Test 1 
 
    <br /> 
 
    <input type="radio" name="something" value="test2" />Test 2</div> 
 
<form method="post" action="index1.php"> <span id="writeroot"></span> 
 

 
    <input type="button" onclick="moreFields();" id="moreFieldsButton" value="Give me more fields!" /> 
 
    <input type="submit" value="Send form" /> 
 
</form>

來源

2014-02-26 10:42:29 MaveRick

MaveRick我刪除了id = moreFields和它的工作..感謝很多 – kirk

你能告訴我爲什麼它不工作更早？有什麼衝突嗎？ – kirk

因爲在調用HTML元素的對象「moreFields」而不是調用函數「moreFields」時，文檔中的每個元素都將是一個名爲ID的JS對象，所以您不能只命名一個函數像一個元素ID – MaveRick

你忘了定義一個onclick屬性來做一些事情，當點擊按鈕時，沒有任何事情發生是正確的執行，見下文;

<input type="button" id="moreFields" onclick="moreFields()" value="Give me more fields!" /> 
            ----------------------

來源

2014-02-26 10:33:42 SajithNair

嘗試了onclick（）函數，但仍然無法正常工作 – kirk

您是否將腳本標記放置在body標記內？ – pythonian29033

是的，我把腳本標籤內的身體標記，但它仍然無法工作 – kirk

你也可以嘗試創建一個按鈕，這將工作，如果你把它放在表單之外;

<button onClick="moreFields(); return false;">Give me more fields!</button>

來源

2014-02-26 10:46:05 pythonian29033

也會試試這個..謝謝你 – kirk

當我嘗試：

<input type="button" id="moreFields" onclick="alert('The text will be show!!'); return false;" value="Give me more fields!" />

它的運作良好。所以我認爲問題是moreFields（）函數的位置。確保該功能將在您的輸入標籤之前定義。

請嘗試：

<script type="text/javascript"> 
    function moreFields() { 
     alert("The text will be show"); 
    } 
</script> 

<input type="button" id="moreFields" onclick="moreFields()" value="Give me more fields!" />

希望它幫助。

來源

2015-09-02 01:25:02 NgaNguyenDuy

輸入類型的onClick函數=「按鈕」不起作用

回答

相關問題