0

Tengo una variable var light = function (){..} que tiene un return ansLight. En otra función la uso como condición en un if if (ansLight === true).

El problema es que no entra en este if.

Actualice el codigo

var ansLight;

var player = function () {
  name = prompt('Introduce un nombre: ');
  while (name < 1) {
    name = prompt('Para comenzar la historia hay que introduce un nombre: ');
  }
  alert('Recueda que puedes interactuar con las imagenes usando el raton.');
  return name;
}

var chapterOne = function (name) {

  // shows the objectives of the game
  var chapterOneText = document.getElementById('history');
  var objetives = document.getElementById('advice');
  objetives.innerHTML = '<section class="row">' +
    '<section class="col-md">' +
    '<h2>Objetivos: </h2>' +
    '</section>' +
    '<section class="col-md"  id="ob1">' +
    '<p>- Encender la luz.</p>' +
    '</section>' +
    '<section class="col-md">' +
    '<p id="ob2">- Encontra la llave.</p>' +
    '</section>' +
    '<section class="col-md">' +
    '<p id="ob3">- Abrir la puerta.</p>' +
    '</section>' +
    '</section>';

  // Chapter One

  chapterOneText.innerHTML = '<h1>Capitulo 1: El despertar de ' + name + ' en la noche.</h1>' +
    '<p>Te levanta por la noche por los ruidos que hace el viento y los truenos...</p>' +
    '<p>En tu habitacion esta todo oscuro, pero cada vez que salta un trueno la habitacion se ilumina.</p>' +
    '<section class="col-md-12 "><img class="img-fluid bedroom mb-0 pb-0" src="img/bedroom.jpg" alt="beedroom"></section>' +
    '<section class="row justify-content-md-center" id="eventLight">' +
    '<section class="col-md-10 p-0 m-0 mr-1"><h2>Pulsa la imagen para encender la luz</h2></section>' +
    '<section class="col-md-3 p-0 m-0 mr-1" id="lightOn"><img class="img-fluid light"  src="img/light.png" alt="light"></section>' +
    '</section>';

  var lightOn = document.getElementById("lightOn").addEventListener("click", light);
  console.log("Estoy en chapter " + ansLight);

  if (ansLight === true) {
    console.log("Estoy en IF " + ansLight);
    var objetiveOne = document.getElementById("ob1");
    objetiveOne.classList.add("objetivesCompleted");
    chapterOneText = document.getElementById("eventLight");
    chapterOneText.classList.remove("justify-content-md-center");
    chapterOneText.classList.remove("row");
    chapterOneText.innerHTML = '';
    chapterOneText.innerHTML += '<p>Enciendes la luz y intentas abrir la puerta, pero la puerta esta cerrada, tendrias que  buscar la llave.</p>' +
      '<p>Te giras y te diriges a tu escritorio para buscarla.</p>' +
      '<p>Tras pasar un rato buscando en tu escritorio encontraste estas cosas: </p>' +
      '<section class="row justify-content-md-center">' +
      '<section class="col-md-2 p-0 m-0 mr-1"><img class="img-fluid key" src="img/key.png" alt="key" onclick="myfunction()"></section>' +
      '<section class="col-md-4 p-0 m-0" mr-1 ml-1><img class="img-fluid paper" src="img/paper.png" alt="paper" onclick="myfunction()"></section>' +
      '<section class="col-md-2 p-0 m-0 ml-0 ml-1"><img class="img-fluid pencil" src="img/pencil.png" alt="pencil" onclick="myfunction()"></section>' +
      '</section>';
  } else {
    while (ansLight === false) {
      alert('La habitacion esta muy oscura, llegas a la puerta pero esta cerrada, para encontrar la llave seria mejor encender la luz.');
      light();
    }
  }
}


var light = function () {
  ansLight = confirm('¿Quieres encender la luz?');
  console.log("Estoy en la funcion " + ansLight);
  return ansLight;
}

player();
chapterOne(name);
body {
    background-color: #e7ebeb!important;
}

.items {
    background-color: #a5c688;
}

.bedroom {
    transition-delay: 1s;
    transition: all .5s ease-in-out;
    filter: grayscale(100%);
}

.bedroom:hover {
    transition-delay: 1s;
    transition: all .5s ease-in-out;
    filter: sepia(60%);
}

.bedroom:active {
    transition-delay: 1s;
    transition: all .5s ease-in-out;
    filter: grayscale(0%);
}

.objetivesCompleted {
  color: #17a2b8;
  text-decoration:line-through;
}

.key:hover {
  cursor: pointer; 
}

.paper:hover {
  cursor: pointer;
}

.pencil:hover {
  cursor: pointer;
}

.light:hover {
    cursor: pointer;
  }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <title>GAME DOM</title>
</head>

<body>
  <section class="container bg-secondary">
    <section class="row">
      <section class="col-md-8 bg-light history" id="history">

      </section>
      <section class="col-md-4 items " id="items-advice">
          <section class="col-md-4 items p-0 m-0 bg-success" id="items "></section>
          <section class="col-md-4 advise p-0 m-0" id="advice"></section>
      </section>
    </section>
  </section>
  <script src="js/gamejs.js "></script>
</body>

</html>

el valor de ansLight cuando llega a la function chapterOne es el valor de ansLight de la variable global, no de la que retorna el var light = function ().

2
  • 1
    sería mejor si pones el código aquí y usas el ícono de {} del editor de textos para darle formato
    – user75901
    Commented el 11 mar. 2018 a las 16:40
  • Sería bueno que agregaras <base> indicando el host de los recursos a los que hace referencia tu código para que se muestre correctamente.
    – Rubén
    Commented el 11 mar. 2018 a las 22:11

2 respuestas 2

1

Respuesta corta

El problema se debe al ámbito de la función

Las variables definidas dentro de una función no pueden ser accedidas desde ningún lugar fuera de la función, ya que la variable está definida sólo en el ámbito de la función. Sin embargo, una función puede acceder a todas las variables y funciones definidas dentro del ámbito en el cual está definida. En otras palabras, una función definida en el ámbito global puede acceder a todas las variables definidas en el ámbito global. Una función definida dentro de otra función, también puede acceder a todas las variables definidas en su función padre y a cualquier otra variable a la que la función padre tenga acceso.

Explicación

El return de una función devuelve el objeto o valor primitivo no una variable.

Una alternativa es usar una variable global. Algo como lo que sigue

var x = '';
setX();
console.info(x);

function setX(){
  x = 'Hola mundo';
}

Nótese que en la función setX no se usar var para asignar el valor a la variable global x.

Otra alternativa es asignar el la función a una variable. Algo como lo que sigue:

var y = setX();
console.info(y);

function setX(){
  var x = 'Hola mundo';
  return x;
}

0

Revisando el código publicado, encuentro:

Debes hacer de la variable ansLight, una variable Global para que puedas usarla en cualquier parte del código, por otro lado, al momento de pasar el programa por el if (ansLight === true, para ese momento no se a cumplido el evento (encender la luz) por lo que la variable ansLight siempre sera false

Partiendo del código publicado, aquí te dejo un ejemplo de como hacerlo:

var ansLight = false; // hacer de ansLight, una variable Global

var player = function () {
  name = prompt('Introduce un nombre: ');
  while (name < 1) {
    name = prompt('Para comenzar la historia hay que introduce un nombre: ');
  }
  alert('Recueda que puedes interactuar con las imagenes usando el raton.');
  return name;
}



var chapterOne = function (name, ansLight, chapterOneLight) {
  // esta es otra forma de hacerlo.
  // shows the objectives of the game
  var chapterOneText = document.getElementById('history');
  var objetives = document.getElementById('advice');
  objetives.innerHTML = '<section class="row">' +
    '<section class="col-md">' +
    '<h2>Objetivos: </h2>' +
    '</section>' +
    '<section class="col-md"  id="ob1">' +
    '<p>- Encender la luz.</p>' +
    '</section>' +
    '<section class="col-md">' +
    '<p id="ob2">- Encontra la llave.</p>' +
    '</section>' +
    '<section class="col-md">' +
    '<p id="ob3">- Abrir la puerta.</p>' +
    '</section>' +
    '</section>';

  // Chapter One

  chapterOneText.innerHTML = '<h1>Capitulo 1: El despertar de ' + name + ' en la noche.</h1>' +
    '<p>Te levanta por la noche por los ruidos que hace el viento y los truenos...</p>' +
    '<p>En tu habitacion esta todo oscuro, pero cada vez que salta un trueno la habitacion se ilumina.</p>' +
    '<section class="col-md-12 "><img class="img-fluid bedroom mb-0 pb-0" src="img/bedroom.jpg" alt="beedroom"></section>' +
    '<section class="row justify-content-md-center" id="eventLight">' +
    '<section class="col-md-10 p-0 m-0 mr-1"><h2>Pulsa la imagen para encender la luz</h2></section>' +
    '<section class="col-md-3 p-0 m-0 mr-1" id="lightOn"><img class="img-fluid light"  src="img/light.png" alt="light"></section>' +
    '</section>';

  var lightOn = document.getElementById("lightOn").addEventListener("click", light);

}


var light = function () {
  ansLight = confirm('¿Quieres encender la luz?');
  if (ansLight === true) {
    var objetiveOne = document.getElementById("ob1");
    objetiveOne.classList.add("objetivesCompleted");
    var chapterOneLight = document.getElementById("eventLight");
    chapterOneLight.classList.remove("justify-content-md-center");
    chapterOneLight.classList.remove("row");
    chapterOneLight.innerHTML = '';
    var chapterOneLight = document.getElementById("eventLight").innerHTML = '<p>Enciendes la luz y intentas abrir la puerta, pero la puerta esta cerrada, tendrias que  buscar la llave.</p>' +
     '<p>Te giras y te diriges a tu escritorio para buscarla.</p>' +
     '<p>Tras pasar un rato buscando en tu escritorio encontraste estas cosas: </p>' +
     '<section class="row justify-content-md-center">' +
     '<section class="col-md-2 p-0 m-0 mr-1"><img class="img-fluid key" src="img/key.png" alt="key" onclick="myfunction()"></section>' +
     '<section class="col-md-4 p-0 m-0" mr-1 ml-1><img class="img-fluid paper" src="img/paper.png" alt="paper" onclick="myfunction()"></section>' +
     '<section class="col-md-2 p-0 m-0 ml-0 ml-1"><img class="img-fluid pencil" src="img/pencil.png" alt="pencil" onclick="myfunction()"></section>' +
     '</section>';
  } else {
    while (ansLight === false) {
      alert('La habitacion esta muy oscura, llegas a la puerta pero esta cerrada, para encontrar la llave seria mejor encender la luz.');
      light();
    }
  }
  return ansLight;
}

player();
chapterOne(name);
body {
    background-color: #e7ebeb!important;
}

.items {
    background-color: #a5c688;
}

.bedroom {
    transition-delay: 1s;
    transition: all .5s ease-in-out;
    filter: grayscale(100%);
}

.bedroom:hover {
    transition-delay: 1s;
    transition: all .5s ease-in-out;
    filter: sepia(60%);
}

.bedroom:active {
    transition-delay: 1s;
    transition: all .5s ease-in-out;
    filter: grayscale(0%);
}

.objetivesCompleted {
  color: #17a2b8;
  text-decoration:line-through;
}

.key:hover {
  cursor: pointer; 
}

.paper:hover {
  cursor: pointer;
}

.pencil:hover {
  cursor: pointer;
}

.light:hover {
    cursor: pointer;
  }
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>GAME DOM</title>
</head>

<body>
  <section class="container bg-secondary">
    <section class="row">
      <section class="col-md-8 bg-light history" id="history">

      </section>
      <section class="col-md-4 items " id="items-advice">
          <section class="col-md-4 items p-0 m-0 bg-success" id="items "></section>
          <section class="col-md-4 advise p-0 m-0" id="advice"></section>
      </section>
    </section>
  </section>
  <script src="js/gamejs.js "></script>
</body>

</html>

En el siguiente ejemplo aplico una lógica adecuada al problema:

var chapter = 1;
$("button").on("click",nextChapter);
function nextChapter(){
 $("#chapter"+chapter).hide();
 chapter++
 $("#chapter"+chapter).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chapter1"><h1>Capitulo 1</h1>
 <button>Siguiente >></button>
</div>
<div id="chapter2" style="display:none"><h1>Capitulo 2</h1>
 <button>Siguiente >></button>
</div>
<div id="chapter3" style="display:none"><h1>Capitulo 3</h1>
 <button>Siguiente >></button>
</div>

8
  • Hice lo que dijiste pero aun sigue sin funcionar.
    – SahJ
    Commented el 11 mar. 2018 a las 20:50
  • @SahJ debes explicar que debe hacer el programa para entonces saber con exactitud que es lo que no funciona.
    – fwBasic
    Commented el 11 mar. 2018 a las 21:14
  • Te comento cuando le das a la imagen de la bombilla, lanza la function y si el ansLight es true, entra en el if. Debe de escribir lo que pone dentro del if, el tema es que no entra y si en la consola llamo a ansLight me dice que es true.
    – SahJ
    Commented el 11 mar. 2018 a las 21:19
  • Entiendo @Sahj, lo que ocurre es que cuando el programa pasa por el if para ese momento no se ha cumplido el evento que esperas, que es, en este caso, el usuario encienda la luz, modificare mi respuesta para que cumpla con el objetivo ;))...
    – fwBasic
    Commented el 11 mar. 2018 a las 23:05
  • no habria alguna forma de tenerlo en var chapterOne = function (name, ansLight, chapterOneLight), y dejar la var light = function (), solo para que el return diga true o false?
    – SahJ
    Commented el 11 mar. 2018 a las 23:29

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.