Javascript 当使用JQuery满足某个条件时，如何能够无误地自动运行JS函数？_Javascript_Jquery_Html

Javascript 当使用JQuery满足某个条件时，如何能够无误地自动运行JS函数？

javascript jquery html

Javascript 当使用JQuery满足某个条件时，如何能够无误地自动运行JS函数？,javascript,jquery,html,Javascript,Jquery,Html,基本上，我的问题是我正在尝试制作一个计算器，当用户打字时自动更新自己我的主要问题是，无论出于什么原因，我都无法让我的代码正常工作我的做法是使用以下代码： $(function() { $('#value').keyup(function (e) { if($(this).val().length >= 5) return sub(); }) }); 但我一直在犯错误： “未捕获引用错

基本上，我的问题是我正在尝试制作一个计算器，当用户打字时自动更新自己

我的主要问题是，无论出于什么原因，我都无法让我的代码正常工作

我的做法是使用以下代码：

      $(function() {
        $('#value').keyup(function (e)  {    
        if($(this).val().length >= 5)
        return sub();
        }) 
      });

但我一直在犯错误：

“未捕获引用错误：$未在索引中定义。html:40”

这里是索引HTML。返回子文件位于外部JS文件中

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="scripts.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css">
    <meta charset="UTF-8">
    <title>Calculator</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <link rel="apple-touch-icon" sizes="128x128" href="icon.png">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 
  </head>
    <body>
        <div action="#">
            <p>
                <label style="text-align:center;" for="valuename"><img id=img src="rs.png"> Value</label>
                <input id="value" name="valuename" type="tel">
            </p>
            <p>
                <label style="text-align:center;" for="valueprice">Buy Price</label>
                <input id="price" name="valueprice" type="number">
            </p>
            <p>
            </p>
            <p>
            </p>
            <div id="results1">
                Get:<img id=img src="rs.png"><b style="color:green;text-align:right" id="keep"></b>
                <br> Price <b style="color:green;">$</b><b style="color:green;" id="keeprate"></b></br>
            </div>
            <div id="results2">
                Sell:<img id=img src="rs.png"><b style="color:green;" id="sell"></b>
                <br> Earn <b style="color:green;">$</b><b style="color:green;text-align:right" id="profit"></br>
  </div>
  <script>
      $(function() {
        $('#value').keyup(function (e)  {    
        if($(this).val().length >= 2)
        return sub();
        }) 
      }); 
    </script>
</body>
</html>


计算器

价值


买入价





获取：

价格$

出售：

赚$

$（函数（）{
$（'#value'）.keyup（函数（e）{
如果（$（this）.val（）.length>=2）
返回sub（）；
}) 
});

我完全被困在这里了，非常感谢您的帮助

您需要“值”输入的id-否则您将无法使用查询来定位输入

改变这个

$('value').keyup(function (e)  { ...

对此

$('#value').keyup(function (e)  { ...

身份证。。您必须获取输入id $（“值”）错误

$（“#value”）对

您正在使用的

cdn

有问题，导致错误

$未定义

如果您更新cdn以使用以下内容，它应该可以工作

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

这就是我看到的

您使用以下代码行使其工作：


$（函数（）{
$（'#value'）.keyup（函数（e）{
如果（$（this）.val（）.length>=2）
返回sub（）；
}) 
});

这是正确的，它应该工作，并且错误

“未捕获引用错误：$未在索引中定义。html:40”

由于CDN故障，您将获得。是的，这是一种罕见的情况，但CDN可能会失败，而且基本上谷歌没有提供jQuery库，这就是为什么没有定义$

为了避免这种情况而不依赖CDN，您可以自己下载jQuery
并将其插入到scripts.js外部文件之前，如下所示或示例：

<script src="jquery-3.4.1.min.js"></script> <script src="scripts.js"></script>

通过这种方式，您可以先执行jQuery，然后再执行，这样依赖它的js代码就可以使用它了。因此，如果您愿意，就不需要在html中再使用它了

<script> $(function() { $('#value').keyup(function (e) { if($(this).val().length >= 2) return sub(); }) }); </script>

$（函数（）{ $（'#value'）.keyup（函数（e）{ 如果（$（this）.val（）.length>=2）返回sub（）； }) });

Paul Fitzgerald提到需要关闭（…/>）
tag
，但这是不正确的。在我看来，它应该很好用

作为建议

尽量避免（或合并）使用CDN，因为您依赖第三方，如果CDN失败，您的代码将无法工作

将javascript代码放在正文结束标记之前。在哪里放置JS代码以及如何从服务器提供JS代码，有很多技术，但这是另一回事

首先，您需要关闭这一行上的
链接这也是无效的$（'value'）尝试使用$（'value'），另外请注意，您不应该有多个元素具有相同的idid=img 我认为cdn存在问题，尝试用这个替换您是否尝试将CDN更新到我上面提供的链接，然后您将需要遵循下面的@gavgrif答案您的回答是正确的，但他看到的错误实际上似乎有所不同-未捕获引用错误：$未在索引中定义。html:40这就是我认为它是CDN的原因issue@PaulFitzgerald-您在评论部分的评论将解决此问题-但这只会将问题隐藏到我看到的错误中-因此我选择不将您的评论作为解决方案重新陈述，并将重点放在新的替代问题上，以帮助OP。CDN就是问题所在，出于某种原因#也不见了，但代码的实时版本上也有。我一定是无意中把它擦掉了。非常感谢您的帮助。感谢并建议您邀请Paul Fitzgerald将其作为解决方案提供—您可以将其标记为解决问题的正确解决方案。不幸的是，你不能选择一条评论作为解决方案，优秀的工作应该得到奖励。这就是问题所在！非常感谢。 <script> $(function() { $('#value').keyup(function (e) { if($(this).val().length >= 2) return sub(); }) }); </script>