Onclick function deleting all HTML elements

Foxtrot14
March 26, 2023
176 views
0 votes
2 Answers

<!DOCTYPE html>

<html>
<head>
</head>

  <button id="someid" onclick="open()">Open A Booster Pack</button>
  <button id="somid" onclick="view()">View Garage</button>
<body>
  <p id="demo"></p>
</body>
<script>
  function open(){
  itms = ['2014 Nissan 350z', '2019 VW golf GTI ', '1995 Mazda 323 Protoge', '1990 BMW 8-series', '1990 ford mustang svt cobra', '1990 mazda rx7', '1990 nissan skyline gt-r'];
itm = itms[Math.floor(Math.random()*itms.length)];
    console.log(itm)
}
  function view(){
    document.getElementById("demo").innerHTML = ""+itm+""
  }
</script>
</html>

I have no idea why all the elements dissapear, even the DOCTYPE declaration vanishes when either button is clicked, for those who want to know I am trying to make a car collection card game website.

Tags: html javascript

Answers

open() is already the name of a function that opens a new page, so when the button is clicked open() is called and an empty page is opened. Just change your function name:

<!DOCTYPE html>

<html>
<head>
</head>

  <button id="someid" onclick="openpack()">Open A Booster Pack</button>
  <button id="somid" onclick="view()">View Garage</button>
<body>
  <p id="demo"></p>
</body>
<script>
  function openpack(){
  itms = ['2014 Nissan 350z', '2019 VW golf GTI ', '1995 Mazda 323 Protoge', '1990 BMW 8-series', '1990 ford mustang svt cobra', '1990 mazda rx7', '1990 nissan skyline gt-r'];
itm = itms[Math.floor(Math.random()*itms.length)];
    console.log(itm)
}
  function view(){
    document.getElementById("demo").innerHTML = ""+itm+""
  }
</script>
</html>

Also, consider changing your code to use event listeners and variables instead. It is better practice:

const itms = ['2014 Nissan 350z', '2019 VW golf GTI ', '1995 Mazda 323 Protoge', '1990 BMW 8-series', '1990 ford mustang svt cobra', '1990 mazda rx7', '1990 nissan skyline gt-r'];
let itm;

document.getElementById('open').addEventListener('click', () => {
  itm = itms[Math.floor(Math.random()*itms.length)];
  console.log(itm)
});

document.getElementById('view').addEventListener('click', () => {
  document.getElementById("demo").innerHTML = ""+itm+""
});

<!DOCTYPE html>

<html>
<head>
</head>
<body>
  <button id="open">Open A Booster Pack</button>
  <button id="view">View Garage</button>
  <p id="demo"></p>
</body>
</html>

Try to change the name of your function. I’m not sure exactly where this code leads, but here’s the fix:

<!DOCTYPE html>

<html>
  <head> </head>

  <button id="someid" onclick="openFunc()">Open A Booster Pack</button>
  <button id="somid" onclick="viewFunc()">View Garage</button>
  <body>
    <p id="demo"></p>
  </body>
  <script>
    function openFunc() {
      itms = [
        "2014 Nissan 350z",
        "2019 VW golf GTI ",
        "1995 Mazda 323 Protoge",
        "1990 BMW 8-series",
        "1990 ford mustang svt cobra",
        "1990 mazda rx7",
        "1990 nissan skyline gt-r",
      ];
        return itms[Math.floor(Math.random() * itms.length)]
    }
    function viewFunc() {
      document.getElementById("demo").innerText = openFunc();
    }
  </script>
</html>

btw, try to avoid innerHtml due to the potential risk it has. Try using innerText or innerContent. Hope it helps

Please signup or login to give your own answer.

Click here to cancel reply.