当我输入文本框的值必须是“”并且颜色必须是红色。我必须对三个文本框使用相同的函数。当我使用 document.getelementsbyclassname() 时,我的函数将无法工作。难道我做错了什么?
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link rel="stylesheet" href="styleDOMoef01.css" type="text/css"/>
<title>DOMoef01</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
function roodVerdwijn(){
document.getElementsByClassName('text1').value="";
document.getElementsByClassName('text1').style.color = "Red";
document.getElementsByClassName('text1').style.background = "White";
}
function gedaan(){
document.getElementByClassName('text1').style.color = "Black";
document.getElementByClassName('text1').style.background = "Gray";
}
</script>
</head>
<body>
<table>
<tr>
<td colspan="2">persoonlijke gegevens</td>
</tr>
<tr>
<td>voornaam</td>
<td><input type="text" value="voornaam" class="text1" onfocus="roodVerdwijn();" onblur="gedaan();"></td>
</tr>
<tr>
<td>achternaam</td>
<td><input type="text" value="achternaam" class="text1" onfocus="roodVerdwijn();" onblur="gedaan();"></td>
</tr>
<tr>
<td>adres</td>
<td><input type="text" value="adres" class="text1" onfocus="roodVerdwijn();" onblur="gedaan();"></td>
</tr>
<tr>
<td><input type="button" value="verzenden" onclick="window.alert('Bedankt om het formulier te verzenden')"></td>
<td><input type="button" value="alles wissen"></td>
</tr>
</table>
</body>
</html>
我尝试用这段代码修复它,但它仍然不起作用:
function roodVerdwijn(){
var elements = document.getElementsByClassName('text1');
for(var i = 0 ; i<elements.length;i++){
elements.value="";
elements.style.color = "Red";
elements.style.background = "White";
}
}
function gedaan(){
var elements2 = document.getElementsByClassName('text1');
for(var i = 0 ; i<elements.length;i++){
elements2.style.color = "Black";
elements2.style.background = "Gray";
}
}
这有点帮助,但是当我专注于一个文本框时,所有 3 个文本框的值都是“”。我只想专注于一个文本框。这就是我改变的:
function roodVerdwijn(){
var elements = document.getElementsByClassName('text1');
for(var i = 0 ; i<elements.length;i++){
elements[i].value="";
elements[i].style.color = "Red";
elements[i].style.background = "White";
}
}
function gedaan(){
var elements2 = document.getElementsByClassName('text1');
for(var i = 0 ; i<elements.length;i++){
elements2[i].style.color = "Black";
elements2[i].style.background = "Gray";
}
}
按类名获取元素返回元素数组。您必须循环每个元素,或者如果您确定您要查找的类只有一个元素,请使用 [0]。
document.getElementsByClassName('text1')[0].value ...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)