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

JavaScript
1

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() {
	div1.style.display = 'block';
}
init();

function other() {
	div2.style.display = 'block';
	div1.style.display = 'none';
}

function start() {
	init();
}

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

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

Scenario:

  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,

2
3

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