javascript 未捕获的 ReferenceError：函数未在 HTMLInputElement.onclick 中定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48182282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught ReferenceError: function is not defined at HTMLInputElement.onclick
提问by Jakub Karki
I have a problem with my code, It's a currency calculator and u can store your results, and it's work fine but I also want to make it able to delete result, function removeRow should do that but when I'm trying to use I have a console error like:
我的代码有问题，它是一个货币计算器，你可以存储你的结果，它工作正常，但我也想让它能够删除结果，函数 removeRow 应该这样做，但是当我尝试使用时，我有控制台错误，如：
Uncaught ReferenceError: removeRow is not defined
at HTMLInputElement.onclick (index.html:1)
I've tried everything I found and nothing helps
我已经尝试了我发现的一切，但没有任何帮助
Here's my code:
这是我的代码：
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM is ready");
const operationConfirm = document.getElementById('operationConfirm');
const resultList = document.getElementById('tableBody');
const operation = {
euroValue: document.getElementById('euroValue'),
operationName: document.getElementById('operationName'),
operationValue: document.getElementById('operationValue')
}
operation.euroValue.onchange = updateValues;
operationConfirm.addEventListener("click", function() {
let thisOperationValue = operation.operationValue.value;
let thisOperationName = operation.operationName.value;
let thisEuroValue = parseFloat(operation.euroValue.value);
let calcResoult = calcCurrency(thisEuroValue, thisOperationValue);
let newOperation = document.createElement('tr');
newOperation.innerHTML = `
<td>${thisOperationName}</td>
<td class="amountToChange">${thisOperationValue}</td>
<td class="resultValue">${calcResoult.toFixed(2)} PLN</td>
<input type="button" value="X" onclick="removeRow(this)" id="deleteBtn"/>`;
const btns = resultList.getElementsByTagName('input');
const delBtns = Array.from(btns);
for( let i = 0; i < delBtns.length; i++) {
delBtns[i].setAttribute('click', 'removeRow(this)');
}
resultList.appendChild(newOperation);
});
function calcCurrency(eValue, quantity) {
return quantity * eValue;
}
function updateValues() {
const outComePLN = Array.from( document.getElementsByClassName('resultValue'));
const outComeEur = Array.from(document.getElementsByClassName('amountToChange'));
for(let i = 0; i < outComePLN.length; i++) {
outComePLN[i].innerHTML = (outComeEur[i].innerHTML * operation.euroValue.value).toFixed(2);
}
};
function removeRow(btn) {
const thisTable = document.getElementById('tableBody');
thisTable.deleteRow(btn.parentNode.parentNode.rowIndex);
}
});
and HTML:
和 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Klkulator walut</title>
</head>
<body>
<style>
#cantor{
margin: 10vh auto 0 auto;
border: 1px solid black;
width: 50%;
min-height: 300px;
}
</style>
<div id="cantor">
<p>1 € = <input type="text" value="4.14" id="euroValue">PLN</p>
<input type="text" placeholder="Nazwa operacji" id="operationName">
<input type="text" placeholder="ilo?? €" id="operationValue">
<input type="submit" placeholder="Oblicz" id="operationConfirm">
<table id="results">
<thead>
<tr>
<th>Nazwa operacji</th>
<th>Kwota €</th>
<th>Kwota PLN</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
<script type="text/javascript" src="main.js"></script>
</div>
</body>
</html>
And here's codepen:
这是代码笔：
回答by Martin Schneider
Just move the function removeRow(btn)-Definition out of the EventListener-Definition. When you create a function inside that scope it will not be visible outside that function.
只需将function removeRow(btn)-Definition 移出 EventListener-Definition。当您在该范围内创建一个函数时，它在该函数之外将不可见。
document.addEventListener("DOMContentLoaded", function(event) {
[...]
});
function removeRow(btn) {
const thisTable = document.getElementById('tableBody');
thisTable.deleteRow(btn.parentNode.rowIndex-1);
}
回答by Vignesh Raja
Just declare the removeRowmethod outside the addEventLister. It works.
只需removeRow在addEventLister. 有用。
On clicking the button, it looks for the function in the global scope. So you need to declare globally.
单击按钮时，它会在全局范围内查找函数。所以你需要全局声明。
