如何 HTML, jQuery, 数字 API

Question

所以，我正在使用 Brackets 并一直运行解决这个问题，也许我对这些事情的理解还不够。这就是我想要做的，我正在尝试制作一个具有输入字段和按钮的 HTML 文档。当您在输入字段中输入一个数字并按下按钮时，它会将该信息提供给一个单独的 app.js 文件，该文件与 api 连接并找到有关该数字的有趣事实。我运行遇到的问题是，我似乎无法将 html 与 JavaScript/jQuery 联系起来。

请帮助，在此先感谢。

$(function Test(){
  $("#button").click( function() {
    var userInput = document.getElementById("userInput").value;
    alert('button clicked');
  }

  $.ajax({
    type: 'GET',
    url: "http://numbersapi.com/" + userInput + "/math?callback=?",
    dataType: 'jsonp',
    success: function(results) {
      var hi = results;
      console.log(hi);
      $("#results").append(results + "hi");
    }
  });
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Pick a number</h1>
<input type="text" id="userInput">Number</input><br>
<button onclick="">Submit</button>
<p id="results">This is a paragraph!</p>

Answer 1

问题：

1- 语法错误。警报后的额外}。

2- 绑定函数时使用了错误的 CSS 选择器。按钮中没有 ID 属性 html.

3- 您包括两个 jQuery 脚本。你应该删除一个。（感谢@Nishit Maheta 指出这一点）

所有修复：

$(function Test(){
  $("#button-sbm").click(function() {
    var userInput = document.getElementById("userInput").value;
    alert('button clicked');

    $.ajax({
      type: 'GET',
      url: "http://numbersapi.com/" + userInput + "/math?callback=?",
      dataType: 'jsonp',
      success: function(results) {
        var hi = results;
        console.log(hi);
        $("#results").append(results + "hi");
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Pick a number</h1>
<input type="text" id="userInput">Number</input><br>
<button id="button-sbm" onclick="">Submit</button>
<p id="results">This is a paragraph!</p>

签出 jsfiddle

中的代码

如何 HTML, jQuery, 数字 API

How to HTML, jQuery, numbers API

html

javascript

api

ajax

jquery