为什么我的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中重新定义Global变量的定义：

$(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更改为其他内容，或者也可以编写其他内容，可以看到需要在多少地方更改代码？ 当您看到几行几乎相同的代码时：您做错了...

而且您需要简化计算，难以编写代码，看看发生了什么...

第三 ，正如亚历山大指出的那样，您需要重新考虑自己的计算方式，如果不是userGuess或theSecret ， userGuess重新计算，但要根据用户猜测与正确值的接近程度/距离给出答案。 ...我称之为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