爲什麼我的JavaScript函數不能執行？

我剛剛完成了一門課的考試，其中一個問題要求我們製作一個簡單的HTML文檔。我們應該包含一些JavaScript代碼，將txtA中的文本複製並放入txtB中，但是當我單擊按鈕時，什麼都不會發生。爲什麼我的JavaScript函數不能執行？

function CopyAToB() { 
 
    var a = document.form1.txtA.value; 
 
    document.form1.txtB.value = a; 
 
}

div { 
 
    text-align: center; 
 
    color: red; 
 
    font-size: 42px; 
 
}

<div>The University of Akron</div> 
 
<form id="form1"> 
 
    <input type="text" id="txtA" /> 
 
    <input type="text" id="txtB" /> 
 
    <input type="button" value="Copy" onclick="CopyAToB();" /> 
 
</form>

來源

2017-02-17 R. Zwahlen

這就是爲什麼瀏覽器都有開發工具的控制檯 - 檢查你的控制檯錯誤...你會想'document.forms.form1 ... etc' –

，能得到任何異常？沒有你注意到頁面重新加載？ – Bergi

您正在使用過時的遺留DOM符號來引用表單元素着重於name屬性而不是ID。例如，如果您更改ID來命名你的代碼的工作屬性：

function CopyAToB() { 
 
    var a = document.form1.txtA.value; 
 
    document.form1.txtB.value = a; 
 
}

div { 
 
    text-align: center; 
 
    color: red; 
 
    font-size: 42px; 
 
}

<div>The University of Akron</div> 
 
<form name="form1"> 
 
    <input type="text" name="txtA" /> 
 
    <input type="text" name="txtB" /> 
 
    <input type="button" value="Copy" onclick="CopyAToB();" /> 
 
</form>

我會高度建議你不這樣做，並使用更多的東西是最新的，如：

function CopyAToB() { 
 
    var a = document.getElementById('txtA').value; 
 
    document.getElementById('txtB').value = a; 
 
}

div { 
 
    text-align: center; 
 
    color: red; 
 
    font-size: 42px; 
 
}

<div>The University of Akron</div> 
 
<form id="form1"> 
 
    <input type="text" id="txtA" /> 
 
    <input type="text" id="txtB" /> 
 
    <input type="button" value="Copy" onclick="CopyAToB();" /> 
 
</form>

來源

2017-02-17 01:22:13 j08691

儘管對於這個測試問題沒有必要，我還建議您學習如何使用[addEventListener]（https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener）來代替'onclick =「function」 '如果你打算做任何嚴肅的JavaScript工作。還有更多的SO閱讀在http://stackoverflow.com/questions/6348494 –

更改CopyAToB功能：

function CopyAToB() { 
 
    var txtA = document.getElementById("txtA"); 
 
    var a = txtA.value; 
 
    var txtB = document.getElementById("txtB"); 
 
    txtB.value = a; 
 
}

div { 
 
    text-align: center; 
 
    color: red; 
 
    font-size: 42px; 
 
}

<div>The University of Akron</div> 
 
<form id="form1"> 
 
    <input type="text" id="txtA" /> 
 
    <input type="text" id="txtB" /> 
 
    <input type="button" value="Copy" onclick="CopyAToB();" /> 
 
</form>

您需要使用getElementbyId功能查找文本框;正如j08691指出的那樣，你試圖去做的方式是遺留下來的。

來源

2017-02-17 01:18:38 bejado

你是什麼意思_「你不能直接引用他們」_？ – j08691

你可以，你只需要給他們一個'name'而不是'id'。不過，使用'id'你也可以這樣做：var txtA = document.getElementById（「txtA」）。value;'，你不需要額外的行。實際上，你可以這樣做：'document.getElementById（「txtB」）。value = document.getElementById（「txtA」）。value;'。這只是一條線;） – myfunkyside

-3

你應該把你的腳本在另一個文件中，幷包含你的腳本你只需要做到以下幾點

<script src="nameofscript.js"></script>

源

來源

2017-02-17 01:22:09 CodeManny

這並不能解決OP的問題。 – bejado

雖然我同意這通常是最佳實踐，但它不是對問題的回答，也不處理腳本中的任何問題。 – Brian

你需要改變你的javascript來顯式選擇元素，因爲它不工作的原因是因爲txtA是未定義的，因爲Jaromanda X說，dev console是你的朋友。嘗試是這樣的：

var txtA = document.getElementById("txtA").value; 
var txtB = document.getElementById("txtB"); 
txtB.value = txtA;

來源

2017-02-17 01:24:38 AlphaDaemon

爲什麼不讓你的最後一行簡單地'txtB.value = txtA'？ – bejado

function CopyAToB() { 
    var a = document.getElementById('txtA'); 
    var b = document.getElementById('txtB'); 
    b.value = a.value; 
}

您可以選擇使用的document.getElementById的HTML元素（）。 w3schools有一些很棒的html/javascript初學者教程。 https://www.w3schools.com/jsref/met_document_getelementbyid.asp

來源

2017-02-17 01:35:48

我會附加一個事件監聽，而不是按鈕，

，並與現代的JavaScript，我們甚至不需要使用document.getElement ......只要我們確保HTML元素的ID對面是獨一無二的（例如：no var form1_txtA =「無關的東西」;）然後這個ID就是我們需要的全部，

form1_txtB.value會做同樣的工作。注意我爲你的ID添加了一個前綴form1_，通過它不需要，我喜歡清晰的id，它告訴它來自哪裏和來自哪裏。

form1_button.addEventListener('click', CopyAToB); 
 

 
function CopyAToB() { 
 
    form1_txtB.value = form1_txtA.value; 
 
}

div { 
 
    text-align: center; 
 
    color: red; 
 
    font-size: 42px; 
 
}

<div>The University of Akron</div> 
 
<form id="form1"> 
 
    <input type="text" id="form1_txtA" /> 
 
    <input type="text" id="form1_txtB" /> 
 
    <input type="button" id="form1_button" value="Copy"/> 
 
</form>

來源

2017-02-17 01:44:04 user2267175

爲什麼我的JavaScript函數不能執行？

回答

相關問題