為什么我的函數（調用時）總是以未定義的形式返回？

Question

我為我正在設計的基於 Web 的游戲編寫了一個函數，但是每當我調用這個函數時，它都會返回為 undefined。

 function getRnd(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function getOttomanRival() { return this.getRnd(1, 3) if (ottoman.rival == 1) { var ottoman.rival = "Mamluks" } if (ottoman.rival == 2) { var ottoman.rival = "Delhi" } if (ottoman.rival == 3) { var ottoman.rival = "Timurids" } function myFunction() { var ottoman = { rival: getOttomanRival() } document.GetElementById("ottomanRival").innerHTML = ottoman.rival() } }

 <button onclick="myFunction()">Click me</button> <p id="ottomanRival"></p>

Answer 1

//This function (get Rand) looks good
function getRnd(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getOttomanRival() {
  return this.getRnd(1, 3) // if you return from here, none of the 
                           // following sentences will be executed
                           // Also you expect the rival name to be returned
                           // So store the random number in a variable
                           // and use it in your if condition and return
                           // the rival name once its set.
                           // Also "this" is not required here

  if (ottoman.rival == 1) { // check the random number generated,
                            // not the rival name against 1
    var ottoman.rival = "Mamluks"; // there is no syntax that declares
                                   // a variable "ottoman.rival" "." is 
                                   // not a valid variable name
                                   // use a simple variable
                                   // This function doesn't even need to know about
                                   // the structure of final object
  }
  if (ottoman.rival == 2) {
    var ottoman.rival = "Delhi"
  }
  if (ottoman.rival == 3) {
    var ottoman.rival = "Timurids"
  } 

  // missing a closing } for getOttomanRival

  function myFunction() {
    var ottoman = {
      rival: getOttomanRival()
    }
    document.GetElementById("ottomanRival").innerHTML = ottoman.rival() 
       // you probably meant "ottoman.rival"
       // without "()" as rival holds the result of `getOttomanRival()"
       // which is a string and not a function
  }
}

 function getRnd(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function getOttomanRival() { var x = getRnd(1, 3), rival; if (x == 1) { rival = "Mamluks" } if (x == 2) { rival = "Delhi" } if (x == 3) { rival = "Timurids" } return rival; } function myFunction() { var ottoman = { rival: getOttomanRival() }; document.getElementById("ottomanRival").innerHTML = ottoman.rival; }

 <button onclick="myFunction()">Click me</button> <p id="ottomanRival"></p>

Answer 2

myFunction未定義的原因是因為它包含在另一個函數getOttomanRival()

正如@hriziya 所說，你可以像這樣分離功能

function getRnd(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getOttomanRival() {
  return this.getRnd(1, 3)
  if (ottoman.rival == 1) {
    var ottoman.rival = "Mamluks"
  }
  if (ottoman.rival == 2) {
    var ottoman.rival = "Delhi"
  }
  if (ottoman.rival == 3) {
    var ottoman.rival = "Timurids"
  }
}

function myFunction() {
  var ottoman = {
    rival: getOttomanRival()
  }
  document.GetElementById("ottomanRival").innerHTML = ottoman.rival()
}

或者，如果您仍然需要保持函數嵌套，您可以像這樣在 HTML 中調用它：

<button onclick="(new getOttomanRival()).myFunction()">Click me</button>

提供myFunction()像這樣更新

this.myFunction = function() {
  var ottoman = {
    rival: getOttomanRival()
  }
  document.GetElementById("ottomanRival").innerHTML = ottoman.rival()
}