My code broke, the clicks don't work

BluebayStudios · October 22, 2023, 1:59pm

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>

python660 · October 22, 2023, 2:20pm

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

RedCoder · October 22, 2023, 3:05pm

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

BluebayStudios · October 22, 2023, 4:00pm

Can you explain? I had it working before.

UMARismyname · October 22, 2023, 9:14pm

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=…>

BluebayStudios · October 22, 2023, 11:13pm

I moved


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

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

BluebayStudios · October 23, 2023, 2:23pm

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

Firepup650 · October 23, 2023, 2:26pm

Could you try deferring the script?

BluebayStudios · October 23, 2023, 2:31pm

This just makes the page blank.

WindLother · October 23, 2023, 2:44pm

You did not close the parenthesis here:

} else if (price === 10000000000 {

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

BluebayStudios · October 23, 2023, 2:55pm

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

WindLother · October 23, 2023, 3:08pm

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.

UMARismyname · October 23, 2023, 4:06pm

or use defer 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.

BluebayStudios · October 23, 2023, 4:16pm

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

UMARismyname · October 23, 2023, 4:18pm

Add defer to the script tag in HTML.

UMARismyname · October 23, 2023, 4:38pm

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

BluebayStudios · October 23, 2023, 4:32pm

That makes the page blank.

system · October 30, 2023, 4:33pm

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