未捕获的 ReferenceError: textAudio 未在 HTMLElement.onclick (index.html:1) 中定义答案

【问题标题】：Uncaught ReferenceError: textAudio is not defined at HTMLElement.onclick (index.html:1)未捕获的 ReferenceError: textAudio 未在 HTMLElement.onclick (index.html:1) 中定义
【发布时间】：2021-06-20 09:10:10
【问题描述】：

我正在尝试从我的 JS 页面调用一个简单的 javascript 函数。但它不起作用。通过事件调用我的函数时出错。

function searchWord() {
  let w = document.getElementById("word")
  const xhr = new XMLHttpRequest();
  var word = `https://api.dictionaryapi.dev/api/v2/entries/en_US/${w.value}`
  xhr.open('GET', word, true);
  xhr.onload = function() {
    let obj = JSON.parse(this.responseText)
    html = ""
    html += `<div class="card-body">
        <h5 class="card-title" id="urWord">${obj[0].word}
        <i class="fas fa-volume-up" id="audio" onclick="textAudio()"></i></h5>
        <p class="card-text"><i class="muted">${obj[0].meanings[0].partOfSpeech} | ${obj[0].phonetics[0].text}</i></p>
        <p class="card-text">${obj[0].meanings[0].definitions[0].definition}</p>
        <p class="card-text"><i class="text-muted">- ${obj[0].meanings[0].definitions[0].example}.</i></p>        
        </div>`
    let notesElm = document.getElementById("mean");
    if (obj.length != 0) {
      notesElm.innerHTML = html;
    } else {
      notesElm.innerHTML = `Nothing to show! Use "Add a Note" section above to add notes.`;
    }
  }
  xhr.send();
}

function textAudio() {
  console.log(obj[0].phonetics[0].text)
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
  <title>API :: Dictionary</title>
</head>

<body>
  <nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" style="margin: auto;" href="index.html">
                API-DICTIONARY
            </a>
    </div>
  </nav>
  <div class="container my-3">
    <div class="input-group mb-3">
      <input type="text" id='word' class="form-control" placeholder="Your Word">
      <button class="btn btn-outline-secondary mx-1" type="button" id="SearchBtn" onclick="searchWord()">Search</button>
    </div>
    <div class="input-group mb-3" style="margin:auto" id="mean">
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<script src="app.js"></script>

</html>

我没有解决此错误的任何想法。我希望任何人都可以提供解决此错误的方法。顺便说一句，我尝试了很多不同的东西。请问谁能帮帮我？

【问题讨论】：

标签： javascript function api onclick

【解决方案1】：

我之前遇到过这个错误，为我解决的问题是使用 addEventListener 而不是 onclick，但我仍然不知道是什么导致了这个错误。我可以给你一个如何使用它的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="js/script.js"></script>
</head>
<body>
    <h1 id="header-for-testing">Hello there!</h1>
</body>
</html>

在 .js 中只做：

window.addEventListener('load', () => {
    var header = document.getElementById("header-for-testing")
    header.addEventListener("click", someFunction)
  })

function someFunction(){
  alert("this is a working event!")
}

哦，是的，实际上并没有使用标题，我只是用它来展示如何使用 addEventListener

【讨论】：

【解决方案2】：

这对你有用吗？我在函数之外声明了 obj 和 textaudioText 。然后使用内联js进行onclick并删除testAudio()函数。

    var obj, textaudioText;

function searchWord() {
    let w = document.getElementById("word");
    const xhr = new XMLHttpRequest();
    var word = `https://api.dictionaryapi.dev/api/v2/entries/en_US/${w.value}`
    xhr.open('GET', word, true);
    xhr.onload = function () {
    var obj = JSON.parse(this.responseText)
var textaudioText = obj[0].phonetics[0].text;
console.log("textaudioText = " + textaudioText);
        html = ""
        html += `<div class="card-body">
        <h5 class="card-title" id="urWord">${obj[0].word}
        <i class="fas fa-volume-up" id="audio" onclick="console.log(${obj[0].phonetics[0].text});"></i></h5>
        <p class="card-text"><i class="muted">${obj[0].meanings[0].partOfSpeech} | ${obj[0].phonetics[0].text}</i></p>
        <p class="card-text">${obj[0].meanings[0].definitions[0].definition}</p>
        <p class="card-text"><i class="text-muted">- ${obj[0].meanings[0].definitions[0].example}.</i></p>        
        </div>`        
        let notesElm = document.getElementById("mean");
        if (obj.length != 0) {
            notesElm.innerHTML = html;
       
        } else {
            notesElm.innerHTML = `Nothing to show! Use "Add a Note" section above to add notes.`;
        }
    }
    xhr.send();
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
        integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <title>API :: Dictionary</title>
</head>

<body>
    <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" style="margin: auto;" href="index.html">
                API-DICTIONARY
            </a>
        </div>
    </nav>
    <div class="container my-3">
        <div class="input-group mb-3">
            <input type="text" id='word' class="form-control" placeholder="Your Word">
            <button class="btn btn-outline-secondary mx-1" type="button" id="SearchBtn"
                onclick="searchWord()">Search</button>
        </div>
        <div class="input-group mb-3" style="margin:auto" id="mean">
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
    integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
    crossorigin="anonymous"></script>
<script src="app.js"></script>
</html>

【讨论】：