使用HTML中的输入来运行函数

Using inputs in HTML to run functions

本文关键字：运行 函数 输入 HTML 使用      更新时间：2024-04-12

所以我正在使用HTML和JS开发股票市场模拟器。我这里有一个api，可以获取当前的股价。这是我的HTMLhttp://pastebin.com/ymcGKtin很抱歉pastebin不太擅长格式化SO。但在添加库存的功能中，我试图将提交的表单stock推送到数组stocks。然而，我在试图弄清楚如何获得提交的表单stock并将其推送到数组时遇到了一个问题。如果我能得到一些关于如何做到这一点的建议，我会得到通知的。具体来说，我想帮助将属性stock推送到数组Stocks。想法？

var Market = {};
var Stocks = [];
Market.getQuote = function(symbol, fCallback){
    this.symbol = symbol;
    this.fCallback = fCallback;
    this.DATA_SRC = "http://dev.markitondemand.com/Api/v2/Quote/jsonp";
    this.makeRequest();
}
Market.getQuote.handleSuccess = function(jsonResult){
    this.fCallback(jsonResult);
}
Market.getQuote.handleError = function(jsonResult){
    console.error(jsonResult);
}
Market.makeRequest = function () {
    //Abort any open requests
    if (this.xhr) { this.xhr.abort(); }
    //Start a new request
    this.xhr = $.ajax({
        data: { symbol: this.symbol },
        url: this.DATA_SRC,
        dataType: "jsonp",
        success: this.handleSuccess,
        error: this.handleError,
        context: this
    });
};
function addStock(){
   alert("derp");
  // Stocks.push(ele.getAttribute)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Stock Market Game PRE ALPHA BETA</title>
</head>
<body>
    <form onsubmit = "addStock()">
        <input type="text" name="stock" value =""><br><br>
        <input type="submit" value="Get Price">
    </form>
        
</body>
</html>

JQuery可以在表单对象上使用find（onsubmit处理程序中的this）：

...
    function addStock(form){
        var value = $(form).find('input[name="stock"]').val();
        alert(value);
        Stocks.push(value);
        //prevents a submit of the form
        return false;
    }
</SCRIPT>
<form onsubmit = "return addStock(this);">
    <input type="text" name="stock" value =""><br><br>
    <input type="submit" value="Get Price">
</form>
...

将addStock()函数更改为使用表单元素集合方法。

function addStock(){
    var xForm = document.forms[0];
    var xField = xForm.elements[0];
    alert("Stock: "+xField.value);
    Stocks.push(xField.value);
    console.log(Stocks);
 }


var Market = {};
var Stocks = [];
Market.getQuote = function(symbol, fCallback) {
  this.symbol = symbol;
  this.fCallback = fCallback;
  this.DATA_SRC = "http://dev.markitondemand.com/Api/v2/Quote/jsonp";
  this.makeRequest();
}
Market.getQuote.handleSuccess = function(jsonResult) {
  this.fCallback(jsonResult);
}
Market.getQuote.handleError = function(jsonResult) {
  console.error(jsonResult);
}
Market.makeRequest = function() {
  //Abort any open requests
  if (this.xhr) {
    this.xhr.abort();
  }
  //Start a new request
  this.xhr = $.ajax({
    data: {
      symbol: this.symbol
    },
    url: this.DATA_SRC,
    dataType: "jsonp",
    success: this.handleSuccess,
    error: this.handleError,
    context: this
  });
};
function addStock() {
  var xForm = document.forms[0];
  var xField = xForm.elements[0];
  alert("Stock: " + xField.value);
  Stocks.push(xField.value);
  console.log(Stocks);
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Stock Market Game PRE ALPHA BETA</title>
</head>
<body>
  <form onsubmit="addStock()">
    <input type="text" name="stock" value="">
    <br>
    <br>
    <input type="submit" value="Get Price">
  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
</body>
</html>

相关文章：