0

/* English words */
var englishWords = ["Blackmail", "Coat", "Skirt", "Recent", "Whole", "Necessary", "Responsible", "Aunt", "Positive", "Efficient", "Familiar", "Frequent", "Convenient", "Opposite", "Suit", "Pass", "Raise", "Consider", "Rest", "Across", "Order", "Definitely", "Weary", "Data", "Native", "Heritage", "Destination", "Comprise", "Numerous", "Rather"];

/* Russian words */
var russianWords = ["Шантаж", "Пальто", "Юбка", "Недавний", "Целый, весь", "Необходимо", "Ответственный", "Тетя", "Уверенный", "Эффективный", "Знакомые", "Частый", "Удобный", "Противоположный", "Костюм", "Сдавать,передача", "Поднять", "Рассматривать, считать", "Отдыхать", "Через,поперек", "Заказ,состояние", "Определенно", "Усталый", "Данные", "Родной", "Наследие", "Место назначениия", "Включать, охватывать", "Многочисленный", "Скорее"];

/* Cheack Answer */
function checkAnswer() {
	var i = 0;
	do {
		var answer = prompt("Enter the translation of the word: " + englishWords[i], "");
		if (answer === russianWords[i]) {
			document.write("Right: " + englishWords[i] + " - " + russianWords[i]+ "<br />");
		}

		else if (answer === null || answer === undefined) {
			var cancel = confirm("Do you want to continue your test?");
				if (cancel != true) {
					alert("Good Bye!");
					break;
				} else {
					i = i - 1;
				}
		}
		
		else  {
			document.write("Your answer: " + answer + ". It is not right" + ". Right: " + englishWords[i] + " - " + russianWords[i] + "<br />"); 
		}
		i++;
	   }
	while (i<englishWords.length);
};
body {
	margin: 0px;
	padding: 0px;
	background: url(images/fon.jpg) no-repeat;
	width: 500px;
	height: 600px;
}

/* Buttons */
#mainBlock {
	margin-left: 50px;
}

.button {
	position: absolute;
	float: right;
	width: 120px;
	height: 30px;
	cursor: pointer;
	background-color: #F6F686;
	border-radius: 6px;
	border: none;
}

#startTest {
	margin-top: 150px;
}

#addWords {
	margin-top: 200px;
}

#editWords {
	margin-top: 250px;
}

#resetList {
	margin-top: 300px;
}
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
	<link href="LEW_style.css" rel="stylesheet" type="text/css" />
	<script src="LEW_JS.js"></script>
</head>
<body>
	
	
	<div id="mainBlock"> 
			<input type="button" value="Start test" id="startTest" class="button" onclick="checkAnswer()">
			<input type="button" value="Add words" id="addWords" class="button">
			<input type="button" value="Edit words" id="editWords" class="button">
			<input type="button" value="Reset List" id="resetList" class="button">
	</div>

	
</body>
</html>
Фон, используемый в коде Всем привет. Я только начал изучать HTML, CSS и JavaScript и ничего еще не знаю. Вопрос следующий: как сделать, чтобы после нажатия на кнопку "Start test", и после прохождения теста, все полученные данные теста(правильно/неправильно введен перевод того или иного слова) были выведены не просто на белом фоне, а, допустим, на любом другом изображении Лондона.

1 ответ 1

0

Блок #area с абсолютным позиционированием перекрывает ваши кнопки. Те вместо того чтобы нажать на кнопку вы нажимаете на блок #area.

Более того, каждый блок с кнопкой тоже с абсолютным позиционированием перекрывает предыдущие. Только удалив все блоки с кнопками, и никому не нужный #area можно нажать на кнопку.

Изучайте верстку.

7
  • Спасибо! Я все переделал и теперь функция запускается по клику на кнопку, но как реализовать вывод слов после функции на тот же html-документ и на каком-нибудь красивом фоне или просто в рамочке? 31 мая 2017 в 1:53
  • Как минимум, не использовать document.write. learn.javascript.ru/…
    – Crantisz
    31 мая 2017 в 5:18
  • Спасибо, пойду учить. 31 мая 2017 в 6:06
  • Вам совет - попробуйте jQuery
    – Crantisz
    31 мая 2017 в 7:13
  • Я подключал пару плагинов с jQuery, было забавно. Но я не знаю, что искать и как. Например, если хочу подключить какой-нибудь красивый слайдер, то я так и наберу в поисковике, но если потребуется решить какую-нибудь проблему, например как у меня, то я даже не знаю как найду что-нибудь. Кстати говоря, я теперь использую document.getElementById("ID").innerHTML для вывода текста в тот самый мой блок с id = "area". Все получается, но innerHTML записывает последнее значение из моего цикла. Не знаете, как сделать, чтобы в блок записывались все результаты теста из моего цикла? 31 мая 2017 в 8:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.