JavaScript代码没有'；不能在浏览器中执行_Javascript_Html

JavaScript代码没有'；不能在浏览器中执行

javascript html

JavaScript代码没有'；不能在浏览器中执行,javascript,html,Javascript,Html,我试图从各种在线教程中学习编程，我创建了flask服务器，它可以预测一些事情。我也得到了javascript的前端，但它不会运行。我不知道为什么。我不知道。我很了解python，但仅此而已我不知道该怎么办以下是html文件： <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" con

我试图从各种在线教程中学习编程，我创建了flask服务器，它可以预测一些事情。我也得到了javascript的前端，但它不会运行。我不知道为什么。我不知道。我很了解python，但仅此而已

我不知道该怎么办

以下是html文件：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="static/style.css">
    <script type="text/javascript", src="static/code.js"></script>

    <title>Heading</title>
  </head>
  <body>
    <br>
    <!--<a href="index.html"><img class="logo" src="static/final_v1.png" alt=""></a>-->
    <br>
    <div class="container main">
  <div class="jumbotron" id="holder">
    <h1 class='main_heading'> Some Machine learning model</h1>
    <h3>lorem ipsum dolor sit amet</h3>
    <br>
    <div class="instructions">
      <h2>Instructions: </h2>
      <p>1. lorem ipsum dolor sit amet</p>
      <p>2. Curabitur tincidunt orci non nunc sagittis euismod.</p>
    </div>
    <br>
    <br>
    <form class="form-horizontal">
      <div class="form-group">
        <label class="control-label col-sm-2" for="email">Feature1:</label>
        <div class="col-sm-10">
          <input  class="form-control" id="feature1" placeholder=" Enter feature1" >
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="button btn btn-default">Submit</button>
        </div>
      </div>
    </form>
    <h2 class="result"></h2>
  </div>
</div>

<!-- Footer -->
<footer class="page-footer font-small blue">

  <div class="footer-copyright text-center py-3">
    <div class="bottom">
      <p><a href="#">xyz | Status Prediction Demo</a></p>
    </div>
  </div>

</footer>
<!-- Footer -->


  </body>
</html>


标题




一些机器学习模型
lorem ipsum dolor sit amet


说明：
一,。lorem ipsum dolor sit amet
二,。乌斯莫德箭鱼




特点1：
提交

以下是JS文件：

var feature1;

$(document).ready(function(){
  // fetch all DOM elements for the input
  feature1_ = document.getElementById("feature1");
  ;

});

$(document).on('click','#submit',function(){
    alert('end')
    // on clicking submit fetch values from DOM elements and use them to make request to our flask API
    var feature1 = feature1_.value;


    if(feature1 == ""){
      // you may allow it as per your model needs
      // you may mark some fields with * (star) and make sure they aren't empty here
      alert("empty fields not allowed");
    }
    else{
      var requestURL = "http://127.0.0.1/predict?f1="+feature1;

      console.log(requestURL); // log the requestURL for troubleshooting
      $.getJSON(requestURL, function(data) {
        console.log(data); // log the data for troubleshooting
        prediction = data['json_key_for_the_prediction'];
      });
      // following lines consist of action that would be taken after the request has been read
      // for now i am just changing a <h2> tag's inner html using jquery
      // you may simple do: alert(prediction);
      alert(prediction)
      $(".result").html("Prediction is:" + prediction);

    }
  });

var特性1；
$（文档）.ready（函数（）{
//获取输入的所有DOM元素
feature1=document.getElementById（“feature1”）；
;
});
$（文档）。在（'单击'，'提交'，函数（）上）{
警报（'结束'）
//单击submit，从DOM元素获取值，并使用它们向我们的FlaskAPI发出请求
var feature1=feature1.值；
如果（功能1==“”）{
//您可以根据您的型号需要使用
//您可以用*（星号）标记一些字段，并确保它们在此处不为空
警报（“不允许空白字段”）；
}
否则{
var requestURL=”http://127.0.0.1/predict?f1=“+特点1；
console.log（requestURL）；//记录requestURL以进行故障排除
$.getJSON（请求URL，函数（数据）{
console.log（data）；//记录用于故障排除的数据
预测=数据['json_key_for_the_prediction']；
});
//以下几行包括读取请求后将采取的操作
//现在，我只是使用jquery更改标记的内部html
//您可以简单地执行以下操作：警报（预测）；
警报（预测）
$（“.result”）.html（“预测为：”+Prediction）；
}
});

后端有一个flask，js应该执行链接。我不知道这为什么不起作用

你能帮我吗？

好的，有几件事：

“提交”按钮缺少id

“提交”按钮会导致重新加载

您的回调将在收到响应之前运行

将您的HTML更改为：

提交

type

属性将删除重新加载，添加的id将使脚本识别它

在获得响应之前，将运行以下代码行：

alert(prediction)
$(".result").html("Prediction is:" + prediction);

将它们放入

getJSON

：

$.getJSON(requestURL, function(data) {
  console.log(data); // log the data for troubleshooting
  var prediction = data['json_key_for_the_prediction']; // <-- added `var`
  alert(prediction);
  $(".result").html("Prediction is:" + prediction);
});

$.getJSON（请求URL，函数（数据）{
console.log（data）；//记录用于故障排除的数据
var prediction=data['json_key_for_the_prediction']；//您显然是新手，因此我提供了一个严格/最低限度的测试用例文件供您使用。当页面加载时，此文件只会触发警报
下载，以便在运行Microsoft操作系统时不添加BOM（字节顺序标记）
将以下代码另存为example.xhtml
根据需要修改

默认测试模板
//
正文{背景色：#000；颜色：#fff；}
默认测试模板
你能详细说明一下“它不会运行”吗？你能分享一下你遇到的错误吗？这是一个奇怪的js，你可以简化它，我在document.ready
中找不到获取document.getElById的原因，当你已经有了另一个用于此目的的事件时，你会发现错误，如果你有错误就会发现控制台中的（按F12打开DevTools并转到控制台选项卡）ReferenceError:$未定义代码。js:3:1注释不用于扩展讨论；此对话已取消。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Default Test Template</title>
<script defer="true" type="application/javascript">
//<![CDATA[
window.onload = function(event)
{
 alert('JavaScript is enabled');
}
//]]>
</script>
<style type="text/css">

body {background-color: #000; color: #fff;}
</style>
</head>

<body>

<h1>Default Test Template</h1>

</body>
</html>