Question

我正在使用JS和jQuery构建一个热门的Cold App。

我的问题是在表单提交上，用户输入插入一个数字，游戏根据数字的接近程度或距离来告诉他们是否保持或冷或更热或持有者。

问题是它只在第一次起作用。之后它什么也没做。

我如何制作它，以便当用户输入提交时生成一个新的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

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

3 个答案: