У меня проблема с кодом JavaScript. Я начинаю программировать, поэтому прошу помочь мне. Итак, что должен делать этот сценарий? После нажатия кнопки "Отправить" он должен написать на сайте значение двух полей формы. Это HTML-код:
<!DOCTYPE HTML>
<html lang="pl_PL">
<head>
<title>KidGifter</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/scripts.js"></script>
</head>
<body>
<div id="list_help">
<img id="smile_help" src="img/smile.png">
<div id="info-form">
<p id="l_h_title">Hejka!</p>
<p id="l_h_text">Tutaj możesz stworzyć swoją liste prezentów i udostępnić ją na Facebooku lub Twitterze. Niech twoi znajomi i bliscy wiedzą co chcesz dostać!</p>
<p id="l_h_formtitle">Najpierw wprowadź nazwę prezentu:</p>
<form>
<input type="text" id="formtitle">
<p id="l_h_formdesc">A teraz możesz krótko go opisać:</p>
<textarea id="formdescription" maxlength="230"></textarea>
<input type="submit" value="+ Dodaj" id="sub" />
</form>
</div>
</div>
</body>
</html>
И это код JavaScript:
window.onload = function(){
var f1 = document.getElementById("f1");
var f2 = document.getElementById("f2");
var submit = document.getElementById("sub");
var body = document.getElementsByTagName("body");
submit.onclick = function() {
html = "";
html += "<div class='gift'>";
html += "<div class='gifttext'>";
html += "<p class='GiftTitle'>" + f1.value + "</p>";
html += "<p class='GiftDescription'>" + f2.value + "</p>";
html += "</div>";
html += "</div>";
body.appendChild(html);
return false;
}
}
Спасибо за помощь ! :)
Вы должны создать элемент DOM, поместить остальную часть вашего HTML в этот элемент DOM и использовать этот элемент DOM для .appendChild()
как это. appendChild()
не принимает строку, она принимает элемент DOM. Кроме того, ваша переменная body
была неправильной. Вот исправленная версия:
window.onload = function () {
var f1 = document.getElementById("f1");
var f2 = document.getElementById("f2");
var submit = document.getElementById("sub");
submit.onclick = function () {
var html = "<div class='gifttext'>";
html += "<p class='GiftTitle'>" + f1.value + "</p>";
html += "<p class='GiftDescription'>" + f2.value + "</p>";
html += "</div>";
var div = document.createElement("div");
div.className = "gift";
div.innerHTML = html;
document.body.appendChild(div);
return false;
}
}
Измененные изменения:
html
как локальную переменную, чтобы она не была неявной глобальной.document.createElement("div")
..innerHTML
только что созданного div.document.body
.body
(это было неправильно, а document.body
уже существует как ссылка на объект body).Я бы предположил, что с вашего нового в javascript, чтобы искать jquery, это библиотека, которая упрощает такие вещи.
var aDiv= document.createElement('div');
//// create p blah blah
aDiv.className = "giftText";
body.appendChild(aDiv);
но с jquery он работает более как это.
$('body').append($('<div class="giftText">);
addClass
свойство addClass
? Не имеет смысла
здесь работает jsfiddle кода из вашего вопроса:
HTML:
<body>
<div id="list_help">
<img id="smile_help" src="img/smile.png">
<div id="info-form">
<p id="l_h_title">Hejka!</p>
<p id="l_h_text">Tutaj możesz stworzyć swoją liste prezentów i udostępnić ją na Facebooku lub Twitterze. Niech twoi znajomi i bliscy wiedzą co chcesz dostać!</p>
<p id="l_h_formtitle">Najpierw wprowadź nazwę prezentu:</p>
<form>
<input type="text" id="formtitle" />
<p id="l_h_formdesc">A teraz możesz krótko go opisać:</p>
<textarea id="formdescription" maxlength="230"></textarea>
<input type="button" value="+ Dodaj" id="sub" />
</form>
</div>
</div>
</body>
JavaScript:
var f1 = document.getElementById("formtitle");
var f2 = document.getElementById("formdescription");
var submit = document.getElementById("sub");
var body = document.getElementsByTagName("body")[0];
submit.onclick = function () {
html = "";
html += "<div class='gift'>";
html += "<div class='gifttext'>";
html += "<p class='GiftTitle'>" + f1.value + "</p>";
html += "<p class='GiftDescription'>" + f2.value + "</p>";
html += "</div>";
html += "</div>";
var d = document.createElement('div');
d.innerHTML = html;
body.appendChild(d);
return false;
}
document.body
.