HTML 按钮，返回未定义的 javascript。答案

【问题标题】：HTML button, returning javascript as undefined.HTML 按钮，返回未定义的 javascript。
【发布时间】：2016-02-19 13:58:36
【问题描述】：

我一直在尝试在我正在从事的项目中执行以下操作。

简单地说，当我单击一个按钮时，我希望能够在其正上方添加一个列表项。我定义的java脚本如下：

function CritHandoff(IDNumber, Description, Status) {
    this.IDNumber = IDNumber;
    this.Description = Description;
    this.Status = Status;
}

function AddCritHandoff() {    
    var result = '';
    var Temp = new CritHandoff("ID123456", "This is a description", "Active");
    result += $('#CritHandoff').html("<li>"+Temp.IDNumber+"</li>");
    return result;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

     <h1 class="Crit" style="color:red">Critical Handoff:</h1>

    <ul id="CritHandoff">
        
    </ul>
    <button type="button" onclick="AddCritHandoff()">Test</button>

当我在页面加载后尝试执行并单击按钮时，调试器启动并说 AddCritHandOff() 未定义。但是，如果我这样更改代码

$(function AddCritHandoff() {    
    var result = '';
    var Temp = new CritHandoff("ID123456", "This is a description", "Active");
    result += $('#CritHandoff').html("<li>"+Temp.IDNumber+"</li>");
    return result;
});

结果将是它在页面加载时执行而没有问题。

我的问题是：

这只是范围的问题吗？尽管它提到对象未定义，但在我看来它已定义，只是在我单击按钮时没有。

我还能怎么做？

感谢您的帮助！

【问题讨论】：

你能给我们更多你的代码吗？您在哪里定义 AddCritHandoff？什么会导致它在您单击按钮“之后”被定义？
在您的示例中，js 代码不在脚本标记内。这意味着如果您将代码放入页面中，它将不会被视为 js。您能否展示如何将此代码包含到页面中？它在单独的文件中吗？如果是这样 - 链接在哪里？还是在标签脚本中内联？如果是这样 - 我们可以看到你的 head/body/scrtip 标签吗？
将其移动到单独的 JS 文件并添加 $(function() {---});围绕这两个功能。它没有加载 AddCritHandoff 函数，因为它无法识别 $('#CritHandoff') ，因为 jQuery 还没有“准备好”。
你正在用 jQuery 连接一个字符串。它是如何工作的？

标签： javascript jquery html scope undefined

【解决方案1】：

您正在将一个字符串与一个 jQuery 对象连接起来。我会这样做：

$(function(){
function CritHandoff(ID, description, status){
  this.ID = ID;
  this.description = description;
  this.status = status;
}
function addCritHandoff() {
  var crit = new CritHandoff("ID123456", "This is a description", "Active"), res = crit.ID;
  $('#CritHandoff').html('<li>'+res+'</li>');
  return res;
}
// I would have this as external JavaScript and run the onclick here as well after giving your button an id or something
});

出于常规原因，我做了一些更改。

【讨论】：

【解决方案2】：

我将 .html 切换为 .append 并且可以正常工作。 - 希望这会有所帮助

function CritHandoff(IDNumber, Description, Status) {
  this.IDNumber = IDNumber;
  this.Description = Description;
  this.Status = Status;
}

function AddCritHandoff() {
  var result = '';
  var Temp = new CritHandoff("ID123456", "This is a description", "Active");
  result += $('#CritHandoff').append("<li>" + Temp.IDNumber + "</li>");
  return result;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 class="Crit" style="color:red">Critical Handoff:</h1>

<ul id="CritHandoff">

</ul>
<button type="button" onclick="AddCritHandoff()">Test</button>

【讨论】：