单击按钮时如何解决未定义的函数错误答案

【问题标题】：How to solve undefined function error while clicking the button单击按钮时如何解决未定义的函数错误
【发布时间】：2019-06-02 03:57:23
【问题描述】：

我正在使用下面的代码 sn-p 在单击按钮时调用函数

<a class="btn btn-primary btn-sm" role="button"  style="display: block; margin: 0 auto;" onclick="RecordFunction()">Record</a>

函数定义如下

<script type="text/javascript">
function RecordFunction (){
  var xhttp = new XMLHttpRequest();
  xhttp.open("POST", "/record/{{name}}", true);
  xhttp.send();
  alert("Thank you ");
}
</script>

但它抛出一个错误

Uncaught ReferenceError: RecordFunction 未定义在 HTMLAnchorElement.onclick

当我搜索错误时，我发现可能是因为该函数未加载所以我尝试在按钮 div 之前定义它并尝试了 this。但没有奏效。任何帮助表示赞赏。

我的整个 index.html 如下所示：

<!doctype html>
<html>

    <head>    

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  </head>
   <body>

<div class="jumbotron text-xs-center">
  <h1 class="display-3">Thank You {{ name }}</h1>
  <p class="lead"  style"text-align:center"><strong>click the below button </strong></p>
  <hr>
  <div class="col-md-4"></div>
  <div class="col-md-6">
  <p class="lead">
    <a class="btn btn-primary btn-sm" role="button"  style="display: block; margin: 0 auto;" onclick="RecordFunction()"> Give Consent  </a>
  </p>
</div>

<div class="col-md-4"></div>
</div>
<!-- </div> -->
<div class="bgImgCenter"></div>
<script type="text/javascript">
function RecordFunction (){
  var xhttp = new XMLHttpRequest();
  xhttp.open("POST", "/record/{{name}}", true);
  xhttp.send();
  alert("Thank You ");
}
</script>

   </body>
</html>

我正在通过烧瓶模板渲染它

@app.route('/<user>')
def hello(user):
    name=user
    return render_template('index.html', name = name)

【问题讨论】：

复制+粘贴您的代码到snippet 不会重现问题。
请您发布文件的其余部分。我个人认为您显示的代码没有任何问题。
您需要显示更多的 HTML 文档结构。只是单独的 <a> 和 <script> 标签不会让我们看到可能导致问题的原因。
@Herohtar 很抱歉没有发布整个内容。我更新了
完整的代码似乎也能正常工作

标签： javascript html flask

【解决方案1】：

试试这个：

click the below button 

缺少一个 = ，应该是

click the below button 

【讨论】：

没用，但我意识到当页面加载 xhttp.open("POST", "/record/{{name}}", true); 时，我在这一行收到错误 Uncaught SyntaxError: Invalid or unexpected token。
{{name}} 的评估结果是什么？
就是我通过return render_template('index.html', name = name)传递的参数。所以我通过调用 localhost:5000/api/john 来渲染这个 html。然后 {{name}} 将是 john。
见上面的答案。也许这会奏效。每当测试它时，代码似乎对我来说都很好。
当我在定义 url 时这样做时，我想我现在遇到了一个错误var xhttp = new XMLHttpRequest(); url="/record/{{ name }}"; console.log(url); xhttp.open("POST",url, true);。我们可以在 onclick 函数中传递 {{ name }} 吗？