AnatolyShirykalov · January 25, 2017 08:59
diff --git a/onepage.html b/onepage.html
 <html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="navigation"></div>
    <div id="papupa">
    </div>
    <script>
      // это произойдёт сразу
      window.templates = {
        greeting: function () {
          var ret = ""
          ret += "<h1>Привет лунатикам!</h1><br/>"
          ret += "<div>Сегодня у нас " + (new Date).toString() + "</div>"
          ret += "<div>Мы находимся тут: " + document.location + "</div>"
          return ret
        },
        another: function(arg){
          var ret = ""
          ret += "<h1>Какой-то другой шаблон</h1>"
          ret += "<div>Сюда можно передавать аргументы, например:"
          ret += "  <span>" + arg + "</span>"
          ret += "</div>"
          return ret
        },
        navigation: function(){
          var ret = ""
          ret += "<button id='toggle'>Другой шаблон</button>"
          return ret
        }
      }
      window.state = 0
      document.addEventListener('DOMContentLoaded', function () { // это произойдёт только после того, как страница будет к этому готова
        document.getElementById('navigation').innerHTML = templates.navigation()
        document.getElementById('papupa').innerHTML = templates.greeting()
        document.getElementById('toggle').addEventListener('click', function (){
          var ar = ["greeting", "another"]
          window.state = (window.state + 1) % 2
          document.getElementById('papupa').innerHTML = templates[ar[state]]("Аргумент") // функциям без аргументов можно передавать аргументы, они их проигнорируют
        })
      })
    </script>
  </body>
 </html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<div id="navigation"></div>
	<div id="papupa">
	</div>
	<script>
	// это произойдёт сразу
	window.templates = {
	greeting: function () {
	var ret = ""
	ret += "<h1>Привет лунатикам!</h1><br/>"
	ret += "<div>Сегодня у нас " + (new Date).toString() + "</div>"
	ret += "<div>Мы находимся тут: " + document.location + "</div>"
	return ret
	},
	another: function(arg){
	var ret = ""
	ret += "<h1>Какой-то другой шаблон</h1>"
	ret += "<div>Сюда можно передавать аргументы, например:"
	ret += " <span>" + arg + "</span>"
	ret += "</div>"
	return ret
	},
	navigation: function(){
	var ret = ""
	ret += "<button id='toggle'>Другой шаблон</button>"
	return ret
	}
	}
	window.state = 0
	document.addEventListener('DOMContentLoaded', function () { // это произойдёт только после того, как страница будет к этому готова
	document.getElementById('navigation').innerHTML = templates.navigation()
	document.getElementById('papupa').innerHTML = templates.greeting()
	document.getElementById('toggle').addEventListener('click', function (){
	var ar = ["greeting", "another"]
	window.state = (window.state + 1) % 2
	document.getElementById('papupa').innerHTML = templates[ar[state]]("Аргумент") // функциям без аргументов можно передавать аргументы, они их проигнорируют
	})
	})
	</script>
	</body>
	</html>