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 ().
<base>
indicando el host de los recursos a los que hace referencia tu código para que se muestre correctamente.