Javascript 未捕获引用错误：函数未在HTMLInputElement.onclick上定义_Javascript_Html_Function

Javascript 未捕获引用错误：函数未在HTMLInputElement.onclick上定义

javascript html function

Javascript 未捕获引用错误：函数未在HTMLInputElement.onclick上定义,javascript,html,function,Javascript,Html,Function,我的代码有一个问题，它是一个货币计算器，你可以存储你的结果，它的工作很好，但我也想使它能够删除结果，函数removeRow应该这样做，但当我试图使用时，我有一个控制台错误，如： Uncaught ReferenceError: removeRow is not defined at HTMLInputElement.onclick (index.html:1) 我已经尝试了我发现的一切，但没有任何帮助这是我的密码： document.addEventListener("DOMContentL

我的代码有一个问题，它是一个货币计算器，你可以存储你的结果，它的工作很好，但我也想使它能够删除结果，函数removeRow应该这样做，但当我试图使用时，我有一个控制台错误，如：

Uncaught ReferenceError: removeRow is not defined
at HTMLInputElement.onclick (index.html:1)

我已经尝试了我发现的一切，但没有任何帮助

这是我的密码：

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

document.addEventListener（“DOMContentLoaded”），函数（事件）{
log（“DOM已准备就绪”）；
const operationConfirm=document.getElementById（'operationConfirm'）；
const resultList=document.getElementById（'tableBody'）；
常量运算={
euroValue:document.getElementById（'euroValue'），
operationName:document.getElementById（'operationName'），
operationValue:document.getElementById（'operationValue'）
}
operation.euroValue.onchange=更新值；
operationConfirm.addEventListener（“单击”，函数（）{
让thisOperationValue=operation.operationValue.value；
让thisOperationName=operation.operationName.value；
让thisEuroValue=parseFloat（operation.euroValue.value）；
设calcResoult=calcCurrency（此EuroValue，此OperationValue）；
让newOperation=document.createElement（'tr'）；
newOperation.innerHTML=`
${thisOperationName}
${thisOperationValue}
${calcResoult.toFixed（2）}PLN
`;
const btns=resultList.getElementsByTagName（'input'）；
常量delBtns=数组。从（btns）；
for（设i=0；i


和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 &euro; = <input type="text" value="4.14" id="euroValue">PLN</p>
    <input type="text" placeholder="Nazwa operacji" id="operationName">
    <input type="text" placeholder="ilość &euro;" id="operationValue">
    <input type="submit" placeholder="Oblicz" id="operationConfirm">
    <table id="results">
      <thead>
        <tr>
          <th>Nazwa operacji</th>
          <th>Kwota &euro;</th>
          <th>Kwota PLN</th>
        </tr>
      </thead>
      <tbody id="tableBody">
      </tbody>
    </table>
    <script type="text/javascript" src="main.js"></script>
  </div>
</body>
</html>


克尔库拉托瓦卢特
#康托{
裕度：10vh自动0自动；
边框：1px纯黑；
宽度：50%；
最小高度：300px；
}
1欧元=印尼国家电力公司
纳兹瓦歌剧院
广达&欧罗；
印尼国家电力公司

这是代码笔：
只需将函数removeRow（btn）
-定义移出EventListener定义即可。当您在该范围内创建函数时，它在该函数外将不可见
document.addEventListener("DOMContentLoaded", function(event) {
   [...]
});

function removeRow(btn) {
  const thisTable = document.getElementById('tableBody');
  thisTable.deleteRow(btn.parentNode.rowIndex-1);
}

只需在addEventLister
之外声明removeow
方法。它起作用了
单击按钮后，它将在全局范围内查找函数。因此您需要全局声明。
Codepen为空。使用带有图标的按钮：
，这样您的代码就可以复制到答案中。我已经编辑了原始帖子，它现在可以工作了。知道为什么它要删除列表中的第一个元素而不是“this”元素吗？btn.parentNode.parentNode未定义，我已经修复了代码示例，因此它可以工作了