文章/答案/技术大牛

发布

社区首页 >问答首页 >Codepen.io，意外数字错误

问Codepen.io，意外数字错误
EN

Stack Overflow用户

提问于 2016-07-13 06:14:46

回答 2查看 338关注 0票数 0

我正在使用jQuery，并使用JSON在Codepen.io中创建了一个简单的项目。

我想从对象数组中选择一个随机索引，为此，我使用了getRandomArbritrary函数。

我的原始代码：

  $(document).ready (function(){
  function getRandomArbitrary(0,2){
  var x = Math.random() * (2 - 0) + 0;
  }

下面是我改正后的代码：

$(document).ready (function(){
function getRandomArbitrary(low,high){
var low = 0;
var high = 2;
var x = Math.random() * (high - low) + low;
return x;
}

function getQuote(){

var obj1 = [ {author: "-Jeremiah 29:11", quote: "For I know the plans I   have for you,” declares the LORD, “plans to prosper you and not to harm   you, plans to give you hope  and a future."},

{ quote: "If God called us to a task, He will then qualify us for the   job."},

{author:"-1Timothy 6:12", quote: "“Fight the good fight of the faith.   Take hold of the eternal life to which you were called and about which you   made the good confession in the presence of many witnesses."},
        ];

$(".quote").text(obj1[x].quote);
$(".author").text(obj1[x].author);
}


$(".button").on("click", function(){
  getQuote();
});
});

javascript

jquery

回答 2

Stack Overflow用户

发布于 2016-07-13 06:21:54

不使用数字，而是为函数参数指定名称：

function getRandomArbitrary(low, high){
    var x = Math.random() * (high - low) + low;
}

最有可能的是，您还希望return结果--现在，该函数实际上什么也不做。

票数 1

Stack Overflow用户

发布于 2016-07-13 06:27:57

Codepen没有什么问题，问题是你使用了actual numbers作为函数参数，即: you 数字到函数括号中。

另一个问题是你在函数中返回的不是，所以它实际上是无用的。如果你想让函数返回值，你应该使用return语句。

现在回到第一个问题，你不应该把字面上的类型值到函数括号中，并且你不能以这种方式提供函数参数，如果你想在每次调用函数时都提供相同的参数，那么你应该这样使用： to type value in the function arguments and you function参数，如果你想在每次调用函数时都提供相同的参数，那么你应该这样做：

function getRandomArbitrary() {
  // determine "low" and "high" values (once)
  var low = 0,
    high = 2;
  // calculate the result
  var x = Math.random() * (high - low) + 0;
  // return the result.
  return x;
}

如果您希望在每次调用函数时都提供自己的值，则应改用以下代码：

function getRandomArbitrary(low, high) {
  // calculate the result
  var x = Math.random() * (high - low) + 0;
  // return the result.
  return x;
}

现在，当我说：There is nothing* wrong with Codepen。请记住，我们永远不能100%确定这一点，如果你认为Codepen有问题，那么你真的应该在他们的support页面上向Codepen报告你认为是什么问题。

我还想提醒您，代码中的jQuery数量充其量是最少的。你可能想看看这个JS tutorial，它只需要你30分钟的时间，它让我开始使用JavaScript，我甚至不时地参考它，请确保你在学习jQuery之前至少了解JavaScript 的基础知识。

我(像成千上万的其他开发人员一样)在理解jQuery是用JavaScript编写的库之前犯了这个错误。

如果你想要一个动手的方法，你可以学习JavaScript和jQuery，并在Code Academy上的免费在线练习它们

我已经修复了HTML中的一些小错误，但总体上没有太“麻烦”。

以下是编辑后的HTML：

<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta content="IE=edge" http-equiv="X-UA-Compatible" />
  <meta content="width=device-width, initial-scale=1" name="viewport" />
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Quote Generator =)</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Amatic+SC" />
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <div class="container">
    <header class="header"><b>Random Quote Generator</b></header>
    <div class="box">
      <input type="button" value="click me for quote" class="button" />
      <div class="quotes">
        <span class="quote"><h1></h1></span>
        <span class="author"><h1></h1></span>
        <div id="share-buttons">
          <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://codepen.io/ionakathryn/pen/YWEPkz";text=Random Quote Generator: www.ionakathryn.com&amp; target="_blank">
            <img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" />
          </a>
          <a href="https://twitter.com/share?url=https://twitter.com&amp;text=Random Quote Generator: www.ionakathryn.com&amp;hashtags=FreeCodeCamp" target="_blank">
            <img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
          </a>
          <a href="http://www.facebook.com/sharer.php?u=https://codepen.io/ionakathryn/pen/YWEPkz";text= ".quotes"&amp; target=".quotes">
            <img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
          </a>
        </div>
      </div>
    </div>
  </div>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

编辑后的JavaScript如下：

// I've noticed that you might use multiple plugins and / or libraries
// so I've written "jQuery(document).ready(function($) {" so that the "$" variable is definitely assigned to jQuery inside the "document ready"
jQuery(document).ready(function($) {
  // removed the quotes list from the function
  // you can even place it above the "document ready" function
  // or even make the quotes variable a global using "window.quotes =" instead of "var quotes ="
  var quotes = [{
    // changed the "quote" to "text" to make it look a little less confusing inside the click function
    "author": "- Jeremiah 29:11",
    "text": "'For I know the plans I have for you,” declares the LORD, “plans to prosper you and not to harm you, plans to give you hope  and a future.'"
  }, {
    "author": "- anonymous",
    "text": "'If God called us to a task, He will then qualify us for the job.'"
  }, {
    "author": "- 1Timothy 6:12",
    "text": "'Fight the good fight of the faith. Take hold of the eternal life to which you were called and about which you made the good confession in the presence of many witnesses.'"
  }, {
    "author": "- Luke 6:31",
    "text": "'Do to others as you would have them do to you.'"
  }, {
    "author": "- 1 Corinthians 13:13",
    "text": "'And now these three remain: faith, hope and love. But the greatest of these is love.'"
  }, {
    "author": "- 1 John 4:8",
    "text": "'Whoever does not love does not know God, because God is love.'"
  }, {
    "author": "- Romans 15:13",
    "text": "'Now may the God of hope fill you with all joy and peace in believing, that you may abound in hope by the power of the Holy Spirit.'"
  }, {
    "author": "- Ecclesiastes 9:10",
    "text": "'Whatever your hand finds to do, do it with all your might.'"
  }, {
    "author": "- Proverbs 12:25",
    "text": "'Anxiety in a man’s heart weighs it down, but an encouraging word makes it glad.'",
  }, {
    "author": "- Mark 9:23",
    "text": "'If you can believe, all things are possible to him who believes.'",
  }];

  // removed the external "getQuote" function as it wasn't unnecessary
  // I'm assuming this because you only use it once
  $(".button").on("click", function() {
    // simplified the process of updating the quote
    var q = quotes[Math.floor(Math.random() * quotes.length)];
    $(".quote").text(q.text).next().text(q.author);
  });
});

祝你好运，万事如意。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38339730

复制

相似问题

问Codepen.io，意外数字错误
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Codepen.io，意外数字错误EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Codepen.io，意外数字错误
EN