0

So for my final assignment I have to create an interactive website using javascript, canvas, html, and css. So I made boxes for my javascript in my canvas and I want boxes to disappear when I click on them but I don't know how to do it. Can someone help me?

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Assignment 5</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header>
      <h1>PART2 - JavaScript and The Canvas</h1>
    </header>

    <canvas id="canvas" width="1000" height="600"></canvas>

    <script src="index.js" charset="utf-8"></script>

    </body>
</html>

Here is my CSS:

html {
  font-size: 14px;
}

header {
  background-color: white;

  height: 3rem;
  text-align: center;
}

h1 {
  color: black;
}

h2 {
  color:white;
}

body{
  background-color: white;

  padding-left: 50px;
  padding-right: 50px;
}

#canvas {
  position: absolute;

  top: 8rem;             
  left: 8rem;

  width: 700px;
  height: 400px;

  background: white;

  animation: move 8s ease infinite;
}

@keyframes move {
  50% {
     transform: translate(600px, 200px);  
  }
}

Here is my JavaScript

randomBoxes();

function getRandomColor() {        
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += (Math.random() * 17 | 0).toString(17);
    }
    return color;
}


function boundryNum(theMin, theMax) {
     var theRange = (theMax - theMin) + 5;
     var randomNum = Math.floor((Math.random() * theRange) + theMin);
     return randomNum;
}


function drawbox() {
  var width = Math.floor(Math.random() * 200) +20;    
  var height = Math.floor(Math.random() * 400) + 20; 

  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

  context.fillRect(boundryNum(25,800),boundryNum(25,400),width,height); 
  context.fillStyle = getRandomColor();
}

function randomBoxes(){
    var number = Math.floor(Math.random() * 5) + 1; 
    //Three to six times....
    while(number >= 0) {
        drawbox();
        number--;
    }
    setInterval(drawbox, 2000)
}
drew
  • 11
  • 1
  • 1
    Welcome to stack overflow! Please remember to include a [Minimal, Complete, and Verifiable](https://stackoverflow.com/help/mcve) example. Such as what you've tried so far, what failed, what research you did. – Nisharg Shah Apr 19 '19 at 20:01
  • 2
    Possible duplicate of [JavaScript hide/show element](https://stackoverflow.com/questions/6242976/javascript-hide-show-element) – Nisharg Shah Apr 19 '19 at 20:02

1 Answers1

0

You havn't included any code in your question so I have just made some, the way I understand your question

    <div style="left: 30px; top: 30px; border-width: 3px; border-style: solid; border-color: black; width: 150px; height: 100px; display: ;" id="box1" onclick="disappear()">
       <h3>Click me</h3>
    </div>
<script type="text/javascript">
  function disappear() {
    document.getElementById("box1").style.display = "none"  ;
  }
</script>
Chris
  • 85
  • 1
  • 4
  • 16
  • Oh, didn't see that you just added it – Chris Apr 19 '19 at 20:21
  • sorry Chris, I didnt really know how to use Stackoverflow so I didnt know that all I had to do was paste my code in description aha. – drew Apr 19 '19 at 20:22
  • @drew That is alright. Can you use my answer or should I make a new one? – Chris Apr 19 '19 at 20:24
  • I tried doing what you provided me with but it didnt work for some reason. I have a whole new brackets file for my JS code, so when I write getElementById, how am I supposed to make div for my JS code file? – drew Apr 19 '19 at 20:27
  • @drew the code that I have provided is an html code, where I have used the "script" tag to write javascript. If you want to split it up, you can put the javascript part in an external document, like you have done in your original code. Otherwise, you will just need to put my code in an html document – Chris Apr 19 '19 at 20:34
  • appreciate your help. But if I put my JS into my HTML script, where would I put my div around for my id tag? Sorry if I am asking a dumb question, it's because I am not really good at coding but just doing it because I have to do it for my program. – drew Apr 19 '19 at 20:39