Работа с HTML при помощи методов

css/feminitives.css

@@ -22,11 +22,17 @@
 	margin: 0;
 }
 
+#definition-help {
+	text-align: justify;
+	font-size: 16px;
+}
+
 #definition-dict {
 	text-align: center;
 	height: 20px;
 	font-size: 18px;
 	margin-top: 25px;
+	margin-bottom: 25px;
 }
 
 #definition-image {

gofem.html

@@ -16,7 +16,7 @@
         <h1>Феминизатор v1.0</h1>
 
         <input id="definition-word" type="text" class="form-control" placeholder="Слово" autofocus>
-        <button id="convert" type="button" onclick="tr('definition')">Феминитивь!</button>
+        <button id="convert" type="button" onclick="tr()">Феминитивь!</button>
 
         <div id="definition-dict"></div>
         <div id="definition-full"></div>
@@ -26,7 +26,7 @@
             <div id="definition-content"></div>
           </div>
         </div>
-        <button type="button" onclick="download_image('definition-image')">IMG</button>
+        <button type="button" onclick="download_image()">IMG</button>
       </div>
     </div>
 

js/feminitives.js

@@ -1,7 +1,19 @@
 // [ ] TODO: vk.com
 // [ ] TODO: валидация
+// [ ] TODO: справка
 // [ ] TODO: ссылки на примеры
 
+//Иерархия элементов на странице
+var HTML = {
+	container: "",
+	_select:    function(element) { return document.getElementById(this.container + "-" + element); },
+	input:      function() { return this._select("word"); },
+	dict:       function() { return this._select("dict"); },
+	content:    function() { return this._select("content"); },
+	full:       function() { return this._select("full"); },
+	image:      function() { return this._select("image"); }
+}
+
 var FEM = {};
 
 //Правила создания феминитивов
@@ -129,14 +141,12 @@ function construct_feminitive(stem, ending, gap) {
 }
 
 //Сохранение изображения с феминитивом
-function download_image(container) {
+function download_image() {
-	html2canvas(document.getElementById(container), {
+	html2canvas(HTML.image(), {
 		onrendered: function (canvas) {
 			var a = document.createElement('a');
 			a.href = canvas.toDataURL();
-			a.download = document.getElementById(container
+			a.download = HTML.content().innerHTML + '.png';
-						.replace(/-.*$/,"-content"))
-						.innerHTML + '.png';
 			a.click();
 		}
 	});
@@ -166,7 +176,7 @@ function make_feminitives(word) {
 }
 
 //Запрос значения слова в викисловаре
-function get_wiktionary(term, container) {
+function get_wiktionary(term) {
 	var cors_url = "https://cors.now.sh/";
 	var wiki_url = cors_url + "https://ru.wiktionary.org/w/index.php?title=" + term + "&action=raw";
 
@@ -219,7 +229,7 @@ function get_wiktionary(term, container) {
 		console.log(true_definition);
 		console.log(article);
 
-		document.getElementById(container).innerHTML = article;
+		HTML.full().innerHTML = article;
 	}
 
 	xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
@@ -235,26 +245,29 @@ function get_wiktionary(term, container) {
 }
 
 //Создание и вывод феминитива
-function tr(container) {
+function tr() {
-	document.getElementById(container + "-dict").innerHTML = "";
+	HTML.dict().innerHTML = "";
 
 	//Исходное слово
-	var wd = document.getElementById(container + "-word").value.trim().split(" ")[0];
+	var wd = HTML.input().value.trim().split(" ")[0];
 
 	//Вывод дефиниции
-	get_wiktionary(wd, container + "-full");
+	get_wiktionary(wd);
 
 	var feminitives = make_feminitives(wd);
 
 	//Вывод информации
-	document.getElementById(container + "-dict").innerHTML    = feminitives[1].join(" | ");
+	HTML.dict().innerHTML    = feminitives[1].join(" | ");
-	document.getElementById(container + "-content").innerHTML = feminitives[0].replace(/(.)/, s => s.toUpperCase());
+	HTML.content().innerHTML = feminitives[0].replace(/(.)/, s => s.toUpperCase());
 }
 
 //Инициализация с разбором адресной строки
 function init(container) {
+	//Задание базового id для всех элементов
+	HTML.container = container;
+
 	//Конвертирование по нажатию <Enter>
-	document.getElementById(container).addEventListener("keyup", function(event) {
+	HTML.input().addEventListener("keyup", function(event) {
 		event.preventDefault();
 		if (event.keyCode == 13) {
 			tr(container);
@@ -274,7 +287,7 @@ function init(container) {
 	}
 
 	if (window.location.search.substring(1)) {
-		document.getElementById(container + "-word").value = decodeURIComponent(querySt("word").replace(/\+/g," "));
+		HTML.input().value = decodeURIComponent(querySt("word").replace(/\+/g," "));
 		tr(container);
 	}
 }