为什么我的 Javascript 没有在提交时添加数据？

Question

我正在用 JS 和 jQuery 构建一个冷热应用程序。

我的问题是在表单提交上，用户输入插入了一个数字，游戏会根据与数字的接近或远近来告诉他们它是保持还是冷或热或保持器。

问题是它只在第一次工作。之后它什么也不做。

我是如何做到的，这样当用户在提交时输入它会生成一个新的 secretNumber 并根据检查器设置输出热或冷或更热或更冷。

似乎它没有生成一个新的密码或者它只是没有输入它。

代码在这里http://codepen.io/mackenzieabby/pen/qOXNLg

JS

   $(document).ready(function(){
    // Global Variables.
    var theSecret = Math.floor((Math.random() * 100) + 0); // Creates Secret Number
    var userGuess = $('#userGuess').val(); // User Inut Guess
    var count = 0;
    var addList = document.createElement("li")
    // Display information modal box
  $(".what").click(function(){
  $(".overlay").fadeIn(1000);
    });

    // Hide information modal box 
    $("a.close").click(function(){
    $(".overlay").fadeOut(1000);
    });

   // Functions

   // New Game
   function newGame() {
    // new gama data here
   }

   // Add To List
   function addtoList() {
   }

   function preventRefresh() {
    $("form").submit(function(event) {
      event.preventDefault();
      theSecret();
      veryHotGuess();
      hotGuess();
      veryColdGuess();
      coldGuess()
      correctAnswer();
    });
   }
   preventRefresh();

   function addGuess() {
   $("ul#guessList").append("<li>" + userGuess + "</li>");
   }


   // Checks if hot or cold or correct

function veryHotGuess() {
  if (userGuess < 25 && theSecret < 25) {
    document.getElementById('feedback').innerHTML = "Very Hot";
   }
}

function hotGuess() {
  if (userGuess < 50 && theSecret < 50) {
    document.getElementById('feedback').innerHTML = "Hot";
  }
}

function veryColdGuess() {
  if (userGuess < 100 && theSecret < 100) {
    document.getElementById('feedback').innerHTML = "Very Cold";
   }
}

function coldGuess() {
  if (userGuess < 75 && theSecret < 75) {
    document.getElementById('feedback').innerHTML = "Cold";
   }
}

function correctAnswer() {
  if (userGuess == theSecret) {
    document.getElementById('feedback').innerHTML = "You Got It";
  }
}  

});

Answer 1

调用 theSecret(); 会导致 JavaScript 错误。您将变量作为函数调用，这并不明显。

顺便说一句，我认为您对猜测“温度”的计算可能非常错误。

Answer 2

您必须在 javascript 中重新定义全局变量的定义：

$(document).ready(function(){
    // Global Variables.
    var theSecret = Math.floor((Math.random() * 100) + 0); // Creates Secret Number
    var userGuess = $('#userGuess').val(); // User Inut Guess
    var count = 0;
    var addList = document.createElement("li")

    ...

那些 不是 全局变量，因为您在一个范围内创建了 document.ready 范围...全局变量必须在任何范围之外定义，因此它在所有范围内都可用，包括在document.ready 以及您编写的任何function 方法中。

其次，您需要重新考虑自己在做什么，通常，您会一遍又一遍地重复自己

document.getElementById('feedback').innerHTML = xxxx;

有一天你需要把feedback改成别的东西，或者还要写别的东西，你能看出你在多少地方需要改变你的代码吗？当你看到几行几乎相同的代码时：你做错了......

而且你需要简化计算，让编码变得困难，看看发生了什么......

第三，正如Alexander 指出的那样，您需要重新考虑如何计算，如果不是userGuess 或theSecret，您要计算什么，但是给出基于用户猜测与正确值之间的距离/距离的答案......我将其称为 2 个数字之间的差异。

类似：Math.abs(theSecret - userGuess)

这是我的方法：

http://codepen.io/anon/pen/wKqzvg?editors=001

---

（删除无关代码）

var theSecret = 0,
    guesses = [];

$(document).ready(function() {
  // Creates Secret Number
  theSecret = Math.floor((Math.random() * 100) + 0);

  $("form").submit(function(evt) {
    evt.preventDefault();
    checkTemperature();
  });
});

// Functions

// Add To List
function addToList(txt) {
  guesses.push(txt);
  $("#count").text(guesses.length);
  $("ul#guessList").append("<li>" + txt + "</li>");
}

function write(txt) {
  document.getElementById('feedback').innerHTML = txt;
}

function checkTemperature() {
  var userGuess = parseInt($('#userGuess').val()),
    dif = Math.abs(theSecret - userGuess);

  // for debug only
  console.log("theSecret:" + theSecret);
  console.log("userGuess:" + userGuess);
  console.log("dif:" + dif);

  addToList(userGuess);

  if (dif < 5)
    write("Vulcan Hot");
  else if (dif < 25)
    write("Very Hot");
  else if (dif < 50)
    write("Hot");
  else if (dif < 75)
    write("Cold");
  else if (dif < 100)
    write("Very Cold");
  else if (dif === 0)
    write("You Got It");
}

Answer 3

问题不在于theSecret，而在于userGuess。您没有在提交时获取值，因此它是空的。我建议始终使用 console.log 或检查变量以确保它们被正确填充。在您的提交中，我添加了这个：userGuess = $('#userGuess').val();，现在它会正确检查。

然而，正如亚历山大所说，数学是错误的。该值将始终低于 100，因此始终为“非常冷”。您必须得到两个数字的绝对差，然后进行猜测检查：

  var difference = Math.abs(theSecret - userGuess);

  if (difference < 100) {
    document.getElementById('feedback').innerHTML = "Very Cold";
  }
  if (difference < 75) {
    document.getElementById('feedback').innerHTML = "Cold";
  }
  if (difference < 50) {
    document.getElementById('feedback').innerHTML = "Hot";
  }
  if (difference < 25) {
    document.getElementById('feedback').innerHTML = "Very Hot";
  }      
  if (difference == 0) {
    document.getElementById('feedback').innerHTML = "You Got It";
  }

我在这里分叉了你的项目：http://codepen.io/paulmg/pen/xwLExM