Когда я запускаю ваш код, кнопка не проблема. Вот ошибка, которую я получаю:
file. html: 44 Uncaught TypeError: Невозможно установить свойство 'inner HTML' для null в processForm (file. html: 44) в HTMLButtonElement .onclick (file. html: 12) processForm @ file. html: 44 onclick @ file. html: 12
Ваша ошибка происходит здесь:
var output = document.getElementById("output");
output.innerHTML = result;
Что такое output? Он нигде не определен с элементом id, который называется output в вашем HTML.
Полагаю, вы хотели куда-нибудь вывести содержимое вашего поля normal, password и textarea? Но только вы можете знать.
Затем просто измените определение вывода на:
var body = document.getElementsByTagName("body")[0];
body.innerHTML += result;
Таким образом, ваш body примет 3 значения и выведет их ниже ваших полей, когда Вы нажимаете свою кнопку.
Также есть одна ошибка, которую вы сделали со знаками " и +, чтобы получить значение поля вашего обычного.
Я исправил это для вашего, так что ваш Весь код должен быть таким:
<body>
<h1>Text Input Devices</h1>
<form action = "">
<fieldset>
<label> Normal text field</label>
<input type = "text" id = "txtNormal" />
<label>Password field</label>
<input type="password" id ="pwd" />
<label>Hidden</label>
<input type ="hidden" id = "hidden" value = "I can't tell you it is hidden" />
<textarea id = "txtArea" rows = "10" cols = "40>"> This is big text area and it can hold a lot of text</textarea>
<button type = "button" onclick="processForm()">Click me</button>
</fieldset>
</form>
</body>
<script type ="text/javascript">
function processForm() {
//Dohvati polja formulara
var txtNormal = document.getElementById("txtNormal");
var pwd = document.getElementById("pwd");
var hidden = document.getElementById("hidden");
var txtArea = document.getElementById("txtArea");
// Spakuj u varijablu vrijednosti formulara
var normal = txtNormal.value;
var password = pwd.value;
var secret = hidden.value;
var bigText = txtArea.value;
//Create output
var result = ""
result += "<dl> \n";
result += "<dt>normal<\/dt> \n";
result += "<dd>" + normal + "<\/dd> \n";
result += "\n";
result += "<dt>password<\/dt> \n";
result += "<dd>" + password + "<\/dd> \n";
result += "\n";
result += "<dt>secret<\/dt> \n";
result += "<dd>" +secret + "<\/dt> \n";
result += "\n";
result += "<dt>big text <\/dt> \n";
result += "<dd>" +bigText + "<\/dt> \n";
result += "<\/dl> \n";
var output = document.getElementsByTagName("body")[0];
output.innerHTML += result;
} //End function
</script>