Javascript动态更改可见性

时间:2014-06-19 14:59:16

标签: javascript html css dynamic

我试图想象这个赋值,并且当用户加载页面时,p标签最初是不可见的,只有在单击提交按钮时,它们的字段结束时才会显示为空白或无效。出于某种原因,在使用" document.forms [0]时它不起作用。 elementNameHere .style.visibility =' hidden';"与...相同 " document.forms [0]。 elementNameHere .style.display =' none';" 有谁能看到这里有什么问题?代码如下。

/ *这不是帮助我做我的任务'因为我的问题与要求无关。我只是想让这个花哨

我很想在stackoverflow上发布问题,所以我不确定我是否正确发布以下代码:* /

<html>
<!--Assignment 6-->
<head>
<script type="text/javascript">
function emptySel(){
    if(document.forms[0].teamDisplay.options[0].text == ""){
        document.forms[0].teamDisplay.style.visibility = "hidden";
    }
    //not becoming invis. Fix this.
    document.forms[0].fnamevalid.style.visibility = "hidden";
    document.forms[0].lnamevalid.style.display = "none";
    document.forms[0].addressvalid.style.display = "none";
    document.forms[0].numbervalid.style.display = "none";
}

//baseball team name, head coach contact info
//members section: name, contact info, position played
//add/delete/modify player info.
//checkbox for guardian permission

var contactInfo = {name:"", lname:"", address:"", number:""};
var member = {contact:"", position:"", canPlay:""};
var teamInfo = {tName:"", coachInfo:"", members:""};

function fieldsNotBlank(){
    if(document.forms[0].fname.style.color != "grey" && 
       document.forms[0].lname.style.color != "grey" && 
       document.forms[0].address.style.color != "grey" && 
       document.forms[0].number.style.color != "grey"){
        document.forms[0].fnamevalid.style.visibility = "collapse";
        document.forms[0].lnamevalid.style.visibility = "collapse";
        document.forms[0].addressvalid.style.visibility = "collapse";
        document.forms[0].numbervalid.style.visibility = "collapse";
        return true;
    } else {

        return false;
    }
}

function subClick(){
    if(fieldsNotBlank()){
        alert("back in subClick");
    }
}

function blurred(elem){
    if(elem.value ==''){
        elem.style.color = 'grey';
            //this CAN be removed
        switch(elem.name){
            case 'fname':
                elem.value = 'First Name';
                break;
            case 'lname':
                elem.value = 'Last Name';
                break;
            case 'address':
                elem.value = 'Address';
                break;
            case 'number':
                elem.value = 'Contact Number';
                break;
            default:
                elem.value = '';
        }
    }
}

function focused(elem){
    if(elem.style.color != 'black'){
        elem.value = '';
        elem.style.color = 'black';
    }
}
</script>
</head>
<body onload="emptySel()">
<form>
<table>
<tr><td>
<p name="fnamevalid" style=" display:table; color:red; font-size:12; margin-bottom:-4px; ">*invalid</p>
<input type="textbox" style="color:grey;" name="fname" size="10" value="First Name" 
onblur="blurred(this);" onfocus="focused(this);" />
</td>
<td>
<p name="lnamevalid" style=" display:table; color:red; font-size:12; margin-bottom:-4px">*invalid</p>
<input type="textbox" style="color:grey;" name="lname" size="10" value="Last Name" 
onblur="blurred(this);" onfocus="focused(this);" />
</td>
<td>
<p name="addressvalid" style=" display:table; color:red; font-size:12; margin-bottom:-4px">*invalid</p>
<input type="textbox" style="color:grey;" name="address" size="30" value="Address" 
onblur="blurred(this);" onfocus="focused(this);" />
</td>
<td>
<p name="numbervalid" style=" display:table; color:red; font-size:12; margin-bottom:-4px">*invalid</p>
<input type="textbox" style="color:grey;" name="number" size="25" value="Contact Number" 
onblur="blurred(this);" onfocus="focused(this);" />
</td><td><input type="button" style="margin-bottom:-15px" onclick="subClick();" value="Add Player" /></td>
</tr>
</form>
</table>
<select name="teamDisplay" size="9">
<option></option>
</select>
</form>
</body>
</html>

0 个答案:

没有答案