How to hide a div that assigned to be displayed in another function

This is part of the codes I have a trouble with:

var div1 = document.getElementById('div1')
  , div1 = document.getElementById('div2')
  , btn1 = document.getElementById('btn1')
  , btn2 = document.getElementById('btn2')
  , btn3 = document.getElementById('btn3')

function init() { = 'block';

function other() { = 'block'; = 'none';

function start() {

function stop() {
	// kill init();

btn1.addEventListener('click', other, false);
btn2.addEventListener('click', start, false);
btn3.addEventListener('click', stop, false);


  1. When open the page, function init runs
  2. I click on button 1 to run an app
  3. Click stop to kill an app
  4. Click button 2 to re-init the program
    I want to hide the div1 when I click on the button 2 after clicking a button 3. It’s just simply not disappear and show along side the div2.
    In css, I set them all display none

Thank you,

thank you,
I corrected that and it still not working.