Нужно понять getElementById+onclick
 

Здравствуйте. У меня тестовый сайт, я новичок. Подскажите как сделать чтоб по нажатию на первую ссылку в меню слева ("подводная лодка") появлялось сообщение "проверка". Файлы приложены.

document.getElementById('subm').onclick = function() {
     alert('проверка')
}

Теперь хочу добавить элемент div со словом "привет" и чтобы он не пропадал: у меня получается что он появляется на момент клика и пропадает. События onRelease в JS я не нахожу. Как нужно сделать?

document.getElementById('subm').onclick = addElement;
//onclick - добавляемые элементы появляются на время клика и пропадают
  var my_div = newDiv = null;

  function addElement() {

    // создаем новый элемент div
    // и добавляем в него немного контента

    var newDiv = document.createElement("div");
        newDiv.innerHTML = "<h1>Привет!</h1>";

    // добавляем только что созданный элемент в дерево DOM

    my_div = document.getElementById("main");
    //вставляем newDiv внутрь main
    my_div.appendChild(newDiv);
  }

o5andrey,
страница перезагружается, потому что по клику вы отправили форму
https://learn.javascript.ru/forms-submit

Т.е. если запускать функцию по нажатию иначе нельзя? По клику всегда происходит обновление страницы? Я значит понял нужно создать переменную-флаг, которую надо циклично проверять на состояние true.

o5andrey,
не выдумывайте, а читайте документацию

o5andrey,
Действия браузера по умолчанию

Дошло, добавил return false; в конец функции.

Мне нужно чтобы рамочка рисовалась только один раз по клику. Спасибо.

document.getElementById('subm').onclick = addElement;
var my_div = newCnv = null;
  function addElement() {
  	if (Document.getElementsByTagName("canvas")[0] == null) {   //<--------------------?
          var newCnv = document.createElement("canvas");
    	  newCnv.setAttribute('id', 'field1')
    	  newCnv.setAttribute('height', 320)
    	  newCnv.setAttribute('width', 480)
          newCnv.innerHTML = "Скорее всего этот браузер не поддерживает HTML5"; 
   }
	var ctx = newCnv.getContext('2d');
        /* Рисует контур прямоугольника на всю ширину и высоту canvas */
        ctx.strokeRect(0, 0, newCnv.width, newCnv.height);
	     // добавляем только что созданный элемент в дерево DOM
	     my_div = document.getElementById("main");
 	     //вставляем newCnv внутрь main
 	     my_div.appendChild(newCnv);
      	     return false; //чтобы добавленные элементы не пропадали из-за перезагрузки страницы
   }

Ошибка в Google Chrome: "Paused on exception: 'TypeError: Document.getElementsByTagName is not a function'."

:blink:

Да, и не догадаешься. Поставил маленькую d и пошло дело. Только почему при втором нажатии рамка пропадает, обновляется страница?