memish · September 25, 2017 16:48
diff --git a/Javascript Starter b/Javascript Starter
 <html lang=en>
 <head>
 <meta charset=utf-8>
    <title>Names</title>
    <style>
    	* { padding: 2; margin: 2; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
    </head>
    <body onload="init()">
 <div id="names">Names:</div>
 <canvas id="myCanvas" width="680" height="100"></canvas>
 <script>
    //https://www.w3schools.com/jsref/default.asp
          var canvas, ctx;
          var canvas = document.getElementById("myCanvas");
          var ctx = canvas.getContext("2d");
    
    /* *****************
    Class Variables
    **********************/ 
    var students = [];
    
    var message = "Names";//text that will appear on the page
    
    
  /* *****************
    Initial state of program
    **********************/ 
    function init(){
        
      
       students.push({fname:"Aidan", lname:"McMeekin", grade:"11th"});
        students.push({fname:"Tyler", lname:"French", grade:"12th"});
        students.push({fname:"Bradley", lname:"French", grade:"9th"});
        
        showNames();
    }//end init method
    
    
    function showNames(){
         var count = 0;
         var theNames = ''
            while (count<students.length){

               // theNames += students[count].fname + "<br>"
                
                 theNames += "<button id=\"" + count + "\" onclick=\"removeStudent(this.id)\">"+ students[count].fname +"</button>";
                 count++;
                
               

            }
            document.getElementById("names").innerHTML = theNames;
        
       // <button onclick="removeStudent()">Click me</button>
        // var x = document.getElementById("myH1").style;
        // document.getElementById("myH1").style.color = "red";
        // this.id
    }
    
    
    function removeStudent(clicked_id){
        var a = parseInt(clicked_id);
        console.log(a);
       // document.getElementById(clicked_id).style.display = "none";
       
        
        //instead move it to a different spot
    }
    
    
    
    
      /* *****************
       display some text
    **********************/ 
   function displayText(){
       message = students[0].fname ;
 	         ctx.fillStyle = "blue";
           ctx.font = "20px Arial";
           ctx.fillText(message, 20,20); 
    }
    
    
    /* *****************
       place your methods in here
    **********************/ 
    function draw() {
        ctx.clearRect(0,0,canvas.width, canvas.height); 
        displayText();
       
    }
 
    setInterval(draw, 200); 
 
     
 
        </script>
    </body>
 </html>
	<html lang=en>
	<head>
	<meta charset=utf-8>
	<title>Names</title>
	<style>
	* { padding: 2; margin: 2; }
	canvas { background: #eee; display: block; margin: 0 auto; }
	</style>
	</head>
	<body onload="init()">
	<div id="names">Names:</div>
	<canvas id="myCanvas" width="680" height="100"></canvas>
	<script>
	//https://www.w3schools.com/jsref/default.asp
	var canvas, ctx;
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");

	/* *****************
	Class Variables
	**********************/
	var students = [];

	var message = "Names";//text that will appear on the page


	/* *****************
	Initial state of program
	**********************/
	function init(){


	students.push({fname:"Aidan", lname:"McMeekin", grade:"11th"});
	students.push({fname:"Tyler", lname:"French", grade:"12th"});
	students.push({fname:"Bradley", lname:"French", grade:"9th"});

	showNames();
	}//end init method


	function showNames(){
	var count = 0;
	var theNames = ''
	while (count<students.length){

	// theNames += students[count].fname + "<br>"

	theNames += "<button id=\"" + count + "\" onclick=\"removeStudent(this.id)\">"+ students[count].fname +"</button>";
	count++;



	}
	document.getElementById("names").innerHTML = theNames;

	// <button onclick="removeStudent()">Click me</button>
	// var x = document.getElementById("myH1").style;
	// document.getElementById("myH1").style.color = "red";
	// this.id
	}


	function removeStudent(clicked_id){
	var a = parseInt(clicked_id);
	console.log(a);
	// document.getElementById(clicked_id).style.display = "none";


	//instead move it to a different spot
	}




	/* *****************
	display some text
	**********************/
	function displayText(){
	message = students[0].fname ;
	ctx.fillStyle = "blue";
	ctx.font = "20px Arial";
	ctx.fillText(message, 20,20);
	}


	/* *****************
	place your methods in here
	**********************/
	function draw() {
	ctx.clearRect(0,0,canvas.width, canvas.height);
	displayText();

	}

	setInterval(draw, 200);



	</script>
	</body>
	</html>