js点击一个按钮，另一个隐藏按钮变颜色问题

先贴出我的代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rhapsody:Monitor</title>
<link href="./images/application-3eed4b9c8db3e691a3a0ff3e1fcfa2b2.css" media="screen" rel="stylesheet" type="text/css">
<link type="text/css" href="./images/jquery-ui-1.7.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="./images/jquery-1.3.2.js"></script>
<script type="text/javascript" src="./images/ui.core.js"></script>
<script type="text/javascript" src="./images/ui.datepicker.js"></script>
<script type="text/javascript">function startTimer(){
setInterval("checkReport()",3000);
}function checkReport(){
var doc;
if(document.all){//IE
doc = document.frames["resultFrame"].document;
}else{//Firefox
doc = document.getElementById("resultFrame").contentDocument;
}
var resultValue = doc.body.innerHTML;alert(resultValue);var button = document.getElementById("report");
//var element = document.getElementById("showElement"); if(resultValue.indexOf("Fail") != -1){
alert(button.value);
//element.stlye.visibility="visible";
button.value = 'Fail';
button.stlye.display='';
button.style.backgroundColor = 'red';
}else{
alert(button.value);
//element.stlye.visibility="visible";
button.value = 'Pass';
button.stlye.display='';
button.style.backgroundColor = 'green';
}
}function clickDisplayCheckbox() {
var dbox = document.getElementById("displayCheckbox");
if (dbox.checked) {
document.getElementById("iframe").body="";
document.getElementById("iframe").style.visibility="visible";} else {
document.getElementById("iframe").style.visibility="hidden";}
}</script>
</head>
<body onload='clickDisplayCheckbox()'>
<div class="login-layout" id="container">
<div id="header">
<div id="header-frame">
<div id="header-content">
<div id="logo">
<a class="ajax" href="https://secure-www.rhapsody.com/">
<img alt="Rhapsody" height="33" src="./images/logo.png" title="Rhapsody" width="153">
</a>
</div>
</div>
</div>
</div>
<div id="middle">
<div id="main-container">
<div id="main">
<div id="focus">
</div>
<div id="login-page" style="height: 505px; ">
<div id="login-module" style="left: 10px; top: 40px; ">
 <input type="checkbox" id="displayCheckbox" onclick="clickDisplayCheckbox()"> Display Output
<form action='monitorServlet' method='post' id="login-form" name="login-form" target="resultFrame" onsubmit="return checkValue();">
<h2 class="general">
Monitor Service
</h2>
<div id="noticebox" style="display: none; ">
<div id="notice"></div>
</div><div class="form-item">
<div class="remember-me" style="text-align: right;width:65px;">
<span style="float:left;padding-top:10px;">
Country:
</span>
<span style="float:left;padding-top:10px;">
<select name="countrylist">
<option selected>US</option>
<option>DE</option>
<option>GB</option>
</select>
</span>
</div>
<div class="remember-me" style="text-align: right;width:265px;">
<input id="monitor" name="monitor" tabindex="4" type="submit" onclick='this.form.act.value="monitor";this.form.target="resultFrame";startTimer()' value="Monitor">
</div>
<div class="remember-me" style="text-align: right;display:none;width:265px;">
<input id="report" name="report" tabindex="4" type="button" value="Pass">
</div>
</div>
<input type="hidden" name="act">
</form>
</div>
<div id="login-form-log" style="top: 40px; ">
<iframe id="resultFrame" name="resultFrame" height="300" width="600" src="">
</iframe>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="footer-frame">
<div id="footer-copyright">
© 2012 Rhapsody International
</div>
</div>
</div>
</div>
</body>
</html>我自己写了一个，但是有点问题，谁能帮忙看看！
说明一下，点击id=monitor button，后台会执行一个shell脚本，结果会返回到id="resultFrame"的iframe中，我们根据返回的内容里面是否含有某一关键字，比如含有Fail,我们会让默认隐藏的按钮id="report"显示为红色，value="Fail"，不含有Fail就让id="report"的按钮显示为绿色，我写了个js的实现，但是按钮不能显示出来且没有变颜色，但是按钮的value值是可以取到的，另外，如果要是用jquery+ajax来写的话应该怎么改？

解决方案 »

  1.   

    <div class="remember-me" style="text-align: right;display:none;width:265px;">
    <input id="report" name="report" tabindex="4" type="button" value="Pass">
    </div>var button = document.getElementById("report");
    你这个display是写在div里面的，所以你用report的id操作是达不到显示该div的效果的，需要对这个div操作才可以的，应该稍微一点改动就可以了~~