My function with multiple || (OR) operators won't run-CodePudding

This is the function that will not run. All of the variables are working in other functions, so they are not the problem i guess?

I tried the console log just to see if anything pops up when one of the criterias in the if statement, but the TEST text is not showing... so it is not running at all.

function spawnValues() {
  if (
    (wood = 100 && metal == 30) ||
    nrOfBuildings == 1 ||
    nrOfBuildings == 3 ||
    metal == 50 ||
    metal == 150 ||
    wood == 50 ||
    wood == 150
  ) {
    console.log("TEST");
    spawnMonsters();
  }
}

CodePudding user response：

i fixed the wood = 100 back to wood == 100. It happened because i have tested w ´=´´==´and === I use VSC to code and i have no errors and no warnings. No errors in browser console, i use the browser console to see if the TEST text shows up.

Below is a minimal reproducible example.

/* top bar */
function infoBar() {
  topBar.innerHTML = `Treverk: ${wood} enheter. Metall: ${metal} enheter. Antall bygninger: ${nrOfBuildings}. Styrke: ${strength}`;
}

/* chop wood */
var wood = 0;
var woodAmount = 25;

function harvestTree() {
  wood = wood   woodAmount;
  treeResource = treeResource - removeTree;
  if (treeResource === 0) {
    tree1.style.visibility = "hidden";
  }
  output.innerHTML  = `<p><li>Hugget tre, fikk 25 treressurser</li></p>`;
  infoBar();
}

tree1.onclick = harvestTree;
var treeResource = 10;
var removeTree = 1;

/* metal mine */
var metal = 0;

function harvestMetal() {
  var metalAmount = 10;
  metal = metal   metalAmount;
  output.innerHTML  = `<p><li>Gravde metal, fikk 10 metalressurser</li></p>`;
  infoBar();
}

buyBuilding.onclick = buyHouse;

/* MONSTER */
var monsterHealth = 40;
var monsterDamage = 5;
var maxMonsterAmount = 3;
var monstersAlive = 0;
var monsterArray;

function spawnValues() {
  if (
    (wood == 100 && metal == 30) ||
    nrOfBuildings == 1 ||
    nrOfBuildings == 3 ||
    metal == 50 ||
    metal == 150 ||
    wood == 50 ||
    wood == 150
  ) {
    console.log("TEST");
    spawnMonsters();
  }
}

function spawnMonsters() {
  var monsterAmount = Math.floor(Math.random() * (maxMonsterAmount   1));
  output.innerHTML = `<p><li>Du blir angrep, drep de for å komme deg videre</li></p>`;
  for (var i = 0; i < monsterAmount; i  ) {
    monsterDiv.innerHTML  = `<img id=monster${
      i   1
    } src="images/cute-wolfman.png"/>`;
  }
  monstersAlive  = monsterAmount;
  if (monstersAlive > 0) {
    battleMode();
  }

  monsterArray = monsterDiv.getElementsByTagName("img");
  for (var i = 0; i < monsterArray.length; i  ) {
    monsterArray[i].onclick = function () {
      monsterFight(this);
    };
  }
}

CodePudding user response：

Here is how it runs, without the pictures though

/* HER LIGGER ALLE VARIABLENE SOM ER HENTET IN FRA HTML DOKUMENTET */
var healthBar = document.getElementById("life-bar");
var topBar = document.getElementById("material-info");
var tree1 = document.getElementById("tree-1");
var tree2 = document.getElementById("tree-2");
var tree3 = document.getElementById("tree-3");
var metalMine = document.getElementById("metal-mine");
var buildings = document.getElementById("building-div");
var monsterDiv = document.getElementById("monster-div");
var buyBuilding = document.getElementById("buy-building-1-btn");
var buyBigBuilding = document.getElementById("buy-building-2-btn");
var buySword = document.getElementById("buy-sword-btn");
var sword = document.getElementById("sword");
var buySword = document.getElementById("buy-sword-btn");
var output = document.getElementById("output-div");

/* FUNKSJONENE FOR TRÆR OG FORSKJELLIGE EVENTS FOR HVERT TRE */
var wood = 0;
var woodAmount = 25;

function harvestTree() {
  wood = wood   woodAmount;
  treeResource = treeResource - removeTree;
  if (treeResource === 0) {
    tree1.style.visibility = "hidden";
  }
  output.innerHTML  = `<p><li>Hugget tre, fikk 25 treressurser</li></p>`;
  infoBar();
}

function harvestTree2() {
  wood = wood   woodAmount;
  treeResource2 = treeResource2 - removeTree2;
  if (treeResource2 === 0) {
    tree2.style.visibility = "hidden";
  }
  output.innerHTML  = `<p><li>Hugget tre, fikk 25 treressurser</li></p>`;
  infoBar();
}

function harvestTree3() {
  wood = wood   woodAmount;
  treeResource3 = treeResource3 - removeTree3;
  if (treeResource3 === 0) {
    tree3.style.visibility = "hidden";
  }
  output.innerHTML  = `<p><li>Hugget tre, fikk 25 treressurser</li></p>`;
  infoBar();
}

/* DET SOM SKAL FÅ TREE1-3 TIL Å FORSVINNE ETTER 10 KLIKK */

tree1.onclick = harvestTree;
var treeResource = 10;
var removeTree = 1;

tree2.onclick = harvestTree2;
var treeResource2 = 10;
var removeTree2 = 1;

tree3.onclick = harvestTree3;
var treeResource3 = 10;
var removeTree3 = 1;

/* FUNKSJONEN SOM GJØR DET MULIG OG FÅ METALL */
var metal = 0;

function harvestMetal() {
  var metalAmount = 10;
  metal = metal   metalAmount;
  output.innerHTML  = `<p><li>Gravde metal, fikk 10 metalressurser</li></p>`;
  infoBar();
}

metalMine.onclick = harvestMetal;

/* FUNKSJONEN SOM LAR DEG KJØPE ET LITE HUS */
function buyHouse() {
  if (wood >= 50 && metal >= 10) {
    buildings.innerHTML  = `<img src="images/building-1.png"/>`;
    wood = wood - 50;
    metal = metal - 10;
    nrOfBuildings = nrOfBuildings   1;
    output.innerHTML  = `<p><li>Kjøpte lite hus for 50 treverk og 10 metall</li></p>`;
    infoBar();
  } else {
    alert("Ikke nok ressurser...");
  }
}

buyBuilding.onclick = buyHouse;

/* FUNKSJONEN SOM LAR DEG KJØPE ETT STORT HUS */
function buyBigHouse() {
  if (wood >= 150 && metal >= 30) {
    buildings.innerHTML  = `<img src="images/building-3.png"/>`;
    wood = wood - 150;
    metal = metal - 30;
    nrOfBuildings = nrOfBuildings   1;
    output.innerHTML  = `<p><li>Kjøpte stort hus for 150 treverk og 30 metall</li></p>`;
    infoBar();
  } else {
    alert("Ikke nok ressurser...");
  }
}

buyBigBuilding.onclick = buyBigHouse;

/* DENNE FUNKSJONEN LAR DEG KJØPE SVERD OG GIR EN BOOST PÅ 30DMG SOM GIR DEG 40 STRENGTH TOTALT */
function getSword() {
  if (metal >= 200) {
    buySword.innerHTML = `<img src="images/sword.png"/>`;
    metal = metal - 200;
    strength = strength   30;
    output.innerHTML  = `<p><li>Du kjøpte ett sverd for 200 metall</li></p>`;
    alert("Du kjøpte et sverd og gjør 40hp i damage");
    infoBar();
  } else {
    alert("Ikke nok ressurser...");
  }
}

sword.onclick = getSword;

/* HER LIGGER INFOBAREN SOM ER ØVERST PÅ SIDE, DEN OPPDATERER VERDIENE ETTER HVA SPILLEREN GJØR */
var nrOfBuildings = 0;
var strength = 10;

function infoBar() {
  topBar.innerHTML = `Treverk: ${wood} enheter. Metall: ${metal} enheter. Antall bygninger: ${nrOfBuildings}. Styrke: ${strength}`;
}

/* HEALTH */
healthBar = 300;
var health = 300;
var userAttckDmg = -10;
var PlayerSwordAttckDmg = -40;

var monsterHealth = 40;
var monsterAttckDmg = -5;

/* MONSTER */
var monsterHealth = 40;
var monsterDamage = 5;
var maxMonsterAmount = 3;
var monstersAlive = 0;
var monsterArray;

function spawnValues() {
  if (
    (wood == 100 && metal == 30) ||
    nrOfBuildings == 1 ||
    nrOfBuildings == 3 ||
    metal == 50 ||
    metal == 150 ||
    wood == 50 ||
    wood == 150
  ) {
    console.log("TEST");
    spawnMonsters();
  }
}

function spawnMonsters() {
  var monsterAmount = Math.floor(Math.random() * (maxMonsterAmount   1));
  output.innerHTML = `<p><li>Du blir angrep, drep de for å komme deg videre</li></p>`;
  for (var i = 0; i < monsterAmount; i  ) {
    monsterDiv.innerHTML  = `<img id=monster${
      i   1
    } src="images/cute-wolfman.png"/>`;
  }
  monstersAlive  = monsterAmount;
  if (monstersAlive > 0) {
    battleMode();
  }

  monsterArray = monsterDiv.getElementsByTagName("img");
  for (var i = 0; i < monsterArray.length; i  ) {
    monsterArray[i].onclick = function() {
      monsterFight(this);
    };
  }
}

/*
    CSS skal ikke (trengs ikke) røres!
*/

body{
    margin: 0;
    background-color: rgb(30, 40, 30);
}

#container{
    font-family: sans-serif;
    width: 1200px;
    height: 660px;
    background-color: rgb(255, 0, 0);
    margin: auto;
    background-image: url("../images/field.jpg");
    background-size: cover;
    background-position: bottom;
    position: relative;
    overflow: hidden;;
}


/*
    ***
    Buildings
    ***
*/
#building-div{
    position: absolute;
    left: 50px;
    top: 270px;
}

#building-div img{
    width: 150px;
}


/*
    ***
    Info div
    ***
*/
#info-div{
    background-color: rgba(50, 50, 50, 0.9);    
}

#material-info{
    padding: 1rem;
}

#container p{    
    margin: 0;
    background-color: rgba(50, 50, 50, 0.7);
    color: rgb(255, 255, 255);
    font-size: 0.9rem;    
}


/*
    ***
    Life bar
    ***    
*/
#life-bar-box{
    background-color: rgb(100, 50, 50);
    width: 300px;
    height: 50px;
}

#container #life-bar{
    background-color: rgb(45, 180, 90);
    width: 300px;
    height: 50px;
}



/*
    ***
    trees
    ***
*/
#tree-1, #tree-2, #tree-3{
    position: absolute;
    cursor: pointer;
    opacity: 0.9;
}

#tree-1:hover, #tree-2:hover, #tree-3:hover{
     opacity: 1;
}



#tree-1{
    height: 250px;    
    bottom: 0px;
    right: 0px;
}

#tree-2{
    height: 250px;
    bottom: 20px;
    right: 50px;
}

#tree-3{
    height: 250px;
    bottom: 15px;
    right: -50px;
}

/*
    ***
    Monsters
    ***
*/
#monster-div{
    position: absolute;
    bottom: 30px;
    right: 300px;
}

#monster-div img{
    height: 100px;
}

#warrior-1{
    position: absolute;
    height: 130px;
    bottom: 10px;
    left: 400px;
}

#metal-mine{
    position: absolute;
    width: 300px;
    bottom: -30px;
    left: -120px;
    cursor: pointer;
    opacity: 0.9;
}

#metal-mine:hover{
    opacity: 1;
}

/*
    ***
    Buttons
    ***
*/
#button-menu button:hover{
    cursor: pointer;
}

#button-menu img{
    height: 50px;
}

#button-menu p{
    padding: 1rem;
}


/*
    ***
    Output div
    ***
*/
#output-div{
    font-family: sans-serif;
    padding: 0.5rem;
    text-align: center;
    width: 1200px;
    background-color: rgb(255, 255, 255);
    margin: auto;
    box-sizing: border-box;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Landsbysimulator 2022</title>
  <!-- Du trenger ikke gjøre noe med CSS-koden! -->
  <link rel="stylesheet" href="css-skal-ikke-roeres/index.css" />
</head>

<body>
  <div id="container">
    <div id="info-div">
      <div id="life-bar-box">
        <p id="life-bar">300hp</p>
        <!-- Dette er selve livet (grønne baren). -->
      </div>

      <!-- Denne p-tagen inneholder informasjon om hvor mye tre og metall man har. -->
      <p id="material-info">
        Treverk: 0 enheter. Metall: 0 enheter. Antall bygninger: 0. Styrke: 10
      </p>
    </div>

    <!-- Knappemenyen -->
    <div id="button-menu">
      <button id="buy-building-1-btn">
          <img src="images/building-1.png" />
          <p>Kjøp (50 treverk, 10 metall)</p>
        </button>
      <button id="buy-building-2-btn">
          <img src="images/building-3.png" />
          <p>Kjøp (150 treverk, 30 metall)</p>
        </button>
      <button id="buy-sword-btn">
          <img id="sword" src="images/sword.png" />
          <p>Kjøp sverd (200 metall)</p>
        </button>
    </div>

    <img id="warrior-1" src="images/warrior.png" />

    <!-- Her legger man til bilder av bygninger. -->
    <div id="building-div"></div>

    <!-- Her legger man til monstre (cute-wolfman.png). -->
    <div id="monster-div"></div>

    <!-- Denne metallgruven skal man kunne klikke på for å få metall -->
    <img id="metal-mine" src="images/metal-mine.png" />

    <!-- Disse trærne skal man kunne klikke på for å få treverk for å bygge hus. -->
    <img id="tree-3" src="images/tree.png" alt="" />
    <img id="tree-2" src="images/tree.png" alt="" />
    <img id="tree-1" src="images/tree.png" alt="" />
  </div>
  <!-- end container-->

  <!-- Her skrives det ut informasjon om hva brukeren gjør og hva som skjer. -->
  <div id="output-div">
    <p>
      Her skal det skrives ut hva som skjer underveis i spillet. For eksempel "Hugget tre, fikk 20 treverkressurser", "Monster angriper og tar 10hp" osv. Man skal legge til  = tekst for å utvide, men siste beskjed skal dukke opp øverst.
    </p>
  </div>

  <script src="/arbeidskrav-prosjektmappe/index.js"></script>
</body>

</html>