My code broke, the clicks don't work

i was adding upgrades to my game, when the clicking stopped working.
https://replit.com/@BluebayStudios/Ples-nerd

let nerd = localStorage.getItem("nerd") ? parseFloat(localStorage.getItem("nerd")) : 0;
let upgradeCount = localStorage.getItem("upgradeCount") ? parseInt(localStorage.getItem("upgradeCount")) : 0;
const scoreElement = document.getElementById("score");
const nerdImage = document.getElementById("nerd-image");
let upgradeInterval;

updateScore();


nerdImage.addEventListener("click", increaseScore);

if (upgradeCount > 0) {
  startUpgradeInterval(upgradeCount);
}

function startUpgradeInterval(upgrades) {
  upgradeInterval = setInterval(() => {
    nerd += upgrades * 0.5;
    updateScore();
    localStorage.setItem("nerd", nerd);
  }, 1000);
}

function increaseScore() {
  nerd++;
  updateScore();
  localStorage.setItem("nerd", nerd);
}

function buyItem(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}

function updateScore() {
  scoreElement.textContent = `nerd: ${nerd}`;
}

function buyBucketNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 1500) {
      upgradeCount +=4; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
audioElement.play();


function startUpgradeInterval(upgrades) {
  if (upgradeInterval) {
    clearInterval(upgradeInterval);  
  }
  upgradeInterval = setInterval(() => {
    nerd += upgrades * 0.5; 
    updateScore();
    localStorage.setItem("nerd", nerd);
  }, 1000);
}
function buyCrateNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 20000) {
      upgradeCount +=20; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}

const audio = new Audio("plesnerd.wav");
audio.loop = true;
audio.play();

function buyVanNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 100000) {
      upgradeCount +=100; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
function buyYachtNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 1000000000) {
      upgradeCount +=200; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
function buyMansionNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 1000000000) {
      upgradeCount +=1000; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
function buyIslandNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 10000000000) {
      upgradeCount +=10000; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
function buyCountryNerd(price) {
  if (nerd >= price) {
    nerd -= price;
    updateScore();
    localStorage.setItem("nerd", nerd);
    if (price === 50) {
      upgradeCount++;
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    } else if (price === 100000000000) {
      upgradeCount +=20000; 
      localStorage.setItem("upgradeCount", upgradeCount);
      startUpgradeInterval(upgradeCount);
    }
  } else {
    alert("you don't have enough nerd to buy this item");
  }
}
<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.cdnfonts.com/css/8bit-wonder" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
  <body>
      
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1>Ples Nerd</h1>
  <h2 id="score">nerd: 0</h2>
  <img src="nerd.png" id="nerd-image">
    <embed src="plesnerd.wav" loop="true" autostart="true" width="2" height="2">
  <div id="shop">
    <h2>shop</h2>
    
    <div id="options">
      <div class="option">
        <h3>handfull of nerd</h3>
        <p>price: 50</p>
        <button onclick="buyItem(50)">Buy</button>
      </div>
     
      <div id="options">
      <div class="option">
        <h3>bucket of nerd</h3>
        <p>price: 1,500</p>
        <button onclick="buyBucketNerd(1500)">Buy</button>
         </div>
       
        <div id="options">
        <div class="option">
          <h3>crate of nerd</h3>
          <p>price: 20,000</p>
          <button onclick="buyCrateNerd(20,000)">Buy</button>
          </div>
         
<div id="options">
<div class="option">
<h3>van of nerd</h3>
<p>price: 100,000</p>
<button onclick="buyVanNerd(100,000)">Buy</button>
</div>
             
<div id="options">
<div class="option">
<h3>yacht of nerd</h3>
<p>price: 1,000,000</p>
<button onclick="buyYachtNerd(1,000,000,000)">Buy</button>
</div>

<div id="options">
<div class="option">
<h3>mansion of nerd</h3>
<p>price: 10,000,000</p>
<button onclick="buyMansionNerd(10,000,000,000)">Buy</button>
</div>

<div id="options">
  <div class="option">
  <h3>island of nerd</h3>
  <p>price: 100,000,000</p>
  <button onclick="buyIslandNerd(100,000,000,000)">Buy</button>
  </div>

  <div id="options">
    <div class="option">
    <h3>country of nerd</h3>
    <p>price: 1,000,000,000</p>
    <button onclick="buyCountryNerd(1,000,000,000,000)">Buy</button>
    </div>
                   

                      
                       
        </div>
      </div>
      <p>made by bluebaystudios 👻</p>     
    </div>
  </div>
</body>
</html>

Do you see an error in the Console (Inspect Element)?

@BluebayStudios Shouldn’t all of the functions be before the event listener and when you call updateScore()?

1 Like

Can you explain? I had it working before.

get to “Console” like this: hit the “Toggle developer tools” button in the top right of the webview. You’ll see a TypeError.
the issue previously linked here was indeed different
Add the defer attribute to your script tag, so that the script loads in after the page loads and so can access all the elements. Like this:

<script defer src=…>
1 Like

I moved


<script src="script.js"></script>

to after all the upgrades, and that fixed the issue.

I’m having the same issue again, my js file is script.js, can you help?

Could you try deferring the script?

This just makes the page blank.

You did not close the parenthesis here:

} else if (price === 10000000000 {

Also, why you’ve defined the function startUpgradeInterval twice?

Still doesn’t work. Anything else I can do?

Remove line 67 audioElement.play();

And as I said, remove one of the function startUpgradeInterval. You’ve define it twice (I’d suggest removing the first one since the second has the logic to clear the interval).

One thing I would recommend is that you wrap your code inside a DOMContentLoaded to make your script runs after the DOM is fully loaded.

or use defer :slightly_smiling_face: and also only source the script once, inside the head.
@BluebayStudios you are looking in the Console for the errors, right? Hit “open in new tab” on the top right of the webview and then do CtrlshiftJ to view a more useful console and debugger.

I currently am unable to access a PC, and the web view is not loading, do you put defer in HTML? Or JS?

Add defer to the script tag in HTML.

1 Like

2 posts were split to a new topic: 404 /favicon.ico
this is a general issue that is unrelated to getting the website to work and so is better in a new topic for indexing

That makes the page blank.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.