Question

所以基本上我无法弄清楚当我调用 add（）函数时（当你点击添加按钮时）为什么会给我一个下拉错误...

它说：status.style未定义 status是一个html dom，一个html标签

我认为错误几乎位于工作表的末尾

＆＃13;

var myArray = []; // * used to store all the data
myArray[0] = ['John', 'Doe', '1980'];
myArray[1] = ['Jane','Malloy','1982'];
myArray[2] = ['Vincent','Malloy','1988'];

var firstName = document.getElementById('firstName');
var secondName = document.getElementById('secondName');
var bornYear = document.getElementById('bornYear');
var output = document.getElementById('output');
var form1 = document.getElementById('form1');
var status = document.getElementById('status');

var add = function() { //calls statusMessagge()
	
	// check if input[] its not empty...
	if ( firstName.value.length>0 && secondName.value.length>0 && bornYear.value.length>0 ) {
		// * adding inputs to myArray
		myArray[myArray.length] = [firstName.value ,secondName.value ,bornYear.value ];
		//clearBoxes();
		// * status messagge
		statusMessagge('good');
		alert('is good');
	}
	else {
		statusMessagge('bad');
		alert('is bad');
	}
};

var statusMessagge = function(arg) { // * it is been called by: add(), show()
	
	// * selecting the messagge to appear
	switch (arg) {
		case 'good':
			status.innerHTML = 'Person added successfully.';
			break;
		case 'bad':
			status.innerHTML = 'Please fill all the fields.';
			break;
		case 'loading':
			status.innerHTML = 'Loading...';
			break;
		case 'loaded':
			status.innerHTML = 'Finish.';
			break;
	}
	
	// * do opacity effect slow: show|hide
	status.style.opacity = 1; // this is the part that I get the error.
	setTimeout (function() {
		status.removeAttribute('style');
	}, 1000);
};

＆＃13;

body {
	background: lightgray;
	font-family: consolas;
	font-size: 13px;
	padding: 0;
	margin: 0;
}
main {
	background: #dbcdcd;
	margin: 0 auto;
}
form:nth-of-type(1) {
	float: left;
}
form:nth-of-type(2) {
	float: left;
}
label { /* for alining elements correctly */
	display: inline-block;
	width: 77px;
	text-align: right;
}
input[type="text"]:not(:first-of-type) {
	margin-top: 5px;
}
#status {
	opacity: 0;
	transition: opacity .20s;
	clear: both;
}

＆＃13;

<!doctype html>
<html lang="es-ES">
	<head>
		<title>.:_My Exercise_:.</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<meta charset="utf-8"/>
	</head>
	<body>
		<main>
			<form id="form1" action=""> <!--action="#"  onsubmit="return false"-->
				<fieldset>
				<legend>Please introduce new person...</legend>
					
					<label>firstName:</label>
					<input id="firstName" type="text" autofocus tabindex="1"/>
					<input type="button" value="Add" onclick="add()"/> <br/>
					
					<label>secondName:</label>
					<input id="secondName" type="text" tabindex="2"/>
					<input type="button" value="Show" onclick="show()"/> <br/>
					
					<label>bornYear:</label>
					<input id="bornYear" type="text" tabindex="3"/>
					<input type="button" value="Sort" onclick="sort()"/>
				</fieldset>
			</form>
			
			<form>
				<fieldset>
				<legend>Sort...</legend>
					<input type="button" value="a-z" onclick=""/>
					<input type="button" value="z-a" onclick=""/>
				</fieldset>
			</form>
			
			<p id="status"></p>
			
			<p id="output"></p>
		</main>
		<script src="script.js"></script>
	</body>
</html>

＆＃13;

Answer 1

不同的方法：

我在chrome上运行你的代码，但有一点不同：在事件' DOMContentLoaded '之后运行script.js，该事件保存你的脚本，直到浏览器通知加载了所有html：

document.addEventListener('DOMContentLoaded', function(){

var myArray = []; // * used to store all the data
myArray[0] = ['John', 'Doe', '1980'];
myArray[1] = ['Jane','Malloy','1982'];
myArray[2] = ['Vincent','Malloy','1988'];

var firstName = document.getElementById('firstName');
var secondName = document.getElementById('secondName');
var bornYear = document.getElementById('bornYear');
var output = document.getElementById('output');
var form1 = document.getElementById('form1');
var status = document.getElementById('status');

window.add = function() { //calls statusMessagge()
	
	// check if input[] its not empty...
	if ( firstName.value.length>0 && secondName.value.length>0 && bornYear.value.length>0 ) {
		// * adding inputs to myArray
		myArray[myArray.length] = [firstName.value ,secondName.value ,bornYear.value ];
		//clearBoxes();
		// * status messagge
		statusMessagge('good');
		alert('is good');
	}
	else {
		statusMessagge('bad');
		alert('is bad');
	}
};

var statusMessagge = function(arg) { // * it is been called by: add(), show()
	
	// * selecting the messagge to appear
	switch (arg) {
		case 'good':
			status.innerText = 'Person added successfully.';
			break;
		case 'bad':
			status.innerText = 'Please fill all the fields.';
			break;
		case 'loading':
			status.innerText = 'Loading...';
			break;
		case 'loaded':
			status.innerText = 'Finish.';
			break;
	}
	
	// * do opacity effect slow: show|hide
	status.style.opacity = 1; // this is the part that I get the error.
	setTimeout (function() {
		status.removeAttribute('style');
	}, 1000);
};
});

在函数 statusMessagge（）中，您使用字符串分配状态，因此它不再是html元素。尝试做：

status.innerText = 'some text';

Answer 2

我认为您想要的是在控制台中显示消息。请使用console.log()。它在Firefox为我工作。

示例：

// ... (your previous code)
if ( firstName.value.length>0 && secondName.value.length>0 && bornYear.value.length>0 ) {

    myArray[myArray.length] = [firstName.value ,secondName.value ,bornYear.value ];

    console.log("good");
    alert('is good');
}
else {
    console.log("bad");
    alert('is bad');
}
// ...

Answer 3

我将元素传递给statusMessage函数，允许我设置它的innerHTML值。

我们在点击而不是onload时获取元素，以防止变量未定义。

＆＃13;

var myArray = []; // * used to store all the data
myArray[0] = ['John', 'Doe', '1980'];
myArray[1] = ['Jane','Malloy','1982'];
myArray[2] = ['Vincent','Malloy','1988'];




var add = function() { //calls statusMessagge()
var firstName = document.getElementById('firstName');
var secondName = document.getElementById('secondName');
var bornYear = document.getElementById('bornYear');
var output = document.getElementById('output');
var form1 = document.getElementById('form1');
var status = document.getElementById('status');
	// check if input[] its not empty...
	if ( firstName.value.length>0 && secondName.value.length>0 && bornYear.value.length>0 ) {
		// * adding inputs to myArray
		myArray[myArray.length] = [firstName.value ,secondName.value ,bornYear.value ];
		//clearBoxes();
		// * status messagge
		statusMessage(status, 'good');
	}
	else {
		statusMessage(status, 'bad');
	}
};

var statusMessage = function(element, arg) { // * it is been called by: add(), show()
    element.style.opacity = 1;
	switch (arg) {
		case 'good':
			element.innerHTML = 'Person added successfully.';
            break;
		case 'bad':
			element.innerHTML = 'Please fill all the fields.';
            break;
		case 'loading':
			element.innerHTML = 'Loading...';
            break;
		case 'loaded':
			element.innerHTML = 'Finish.';
            break;
        default:
            element.innerHTML = "";
            break;
	}
	// * do opacity effect slow: show|hide

	setTimeout (function() {
		element.removeAttribute('style');
	}, 1000);
};

＆＃13;

body {
	background: lightgray;
	font-family: consolas;
	font-size: 13px;
	padding: 0;
	margin: 0;
}
main {
	background: #dbcdcd;
	margin: 0 auto;
}
form:nth-of-type(1) {
	float: left;
}
form:nth-of-type(2) {
	float: left;
}
label { /* for alining elements correctly */
	display: inline-block;
	width: 77px;
	text-align: right;
}
input[type="text"]:not(:first-of-type) {
	margin-top: 5px;
}
#status {
	opacity: 0;
	transition: opacity .20s;
	clear: both;
}

＆＃13;

<!doctype html>
<html lang="es-ES">
	<head>
		<title>.:_My Exercise_:.</title>
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<meta charset="utf-8"/>
	</head>
	<body>
		<main>
			<form id="form1" action=""> <!--action="#"  onsubmit="return false"-->
				<fieldset>
				<legend>Please introduce new person...</legend>
					
					<label>firstName:</label>
					<input id="firstName" type="text" autofocus tabindex="1"/>
					<input type="button" value="Add" onclick="add()"/> <br/>
					
					<label>secondName:</label>
					<input id="secondName" type="text" tabindex="2"/>
					<input type="button" value="Show" onclick="show()"/> <br/>
					
					<label>bornYear:</label>
					<input id="bornYear" type="text" tabindex="3"/>
					<input type="button" value="Sort" onclick="sort()"/>
				</fieldset>
			</form>
			
			<form>
				<fieldset>
				<legend>Sort...</legend>
					<input type="button" value="a-z" onclick=""/>
					<input type="button" value="z-a" onclick=""/>
				</fieldset>
			</form>
			
			<p id="status"></p>
			
			<p id="output"></p>
		</main>
		<script src="script.js"></script>
	</body>
</html>

＆＃13;

[HTML DOM] .style undefinded？（html5 app：地址簿）

3 个答案:

[HTML DOM] .style undefinded？ （html5 app：地址簿）

3 个答案:

[HTML DOM] .style undefinded？（html5 app：地址簿）