Question 43493 in Html Question posted in
Some basic documentation can be found here.

Onclick function deleting all HTML elements

<!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:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search