首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

js点击一个旋钮触发事件,根据事件结果显示另外一个按钮

2013-06-25 
js点击一个按钮触发事件,根据事件结果显示另外一个按钮控件包括按钮A,按钮B(默认隐藏),文本域C点击页面上

js点击一个按钮触发事件,根据事件结果显示另外一个按钮
控件包括按钮A,按钮B(默认隐藏),文本域C
点击页面上的按钮A,后台会执行一个shell脚本,shell执行完之后会把类似日志的结果返回到文本域C中,如果文本域C中包含fail关键字,默认隐藏的按钮B显示fail,并且按钮颜色是红色,反之隐藏的按钮B显示pass,颜色是绿色,小弟不太会js,谁能给个简单的示例代码,谢谢!
[解决办法]

引用:
控件包括按钮A,按钮B(默认隐藏),文本域C
点击页面上的按钮A,后台会执行一个shell脚本,shell执行完之后会把类似日志的结果返回到文本域C中,如果文本域C中包含fail关键字,默认隐藏的按钮B显示fail,并且按钮颜色是红色,反之隐藏的按钮B显示pass,颜色是绿色,小弟不太会js,谁能给个简单的示例代码,谢谢!


<script type="text/javascript">
    function test(){
      var cVal = document.getElementById("C").value;
  var bb = document.getElementById("B");
      if(cVal.indexOf("fail") > -1){
        bb.value='fail';
bb.style.display='';
bb.style.backgroundColor="red";
      }else{
        bb.value ='pass';
bb.style.display='';
bb.style.backgroundColor="green";
      }
    }
</script>
<body >
<input type="button" onClick="test();" id="A" value="A">
<input type="button" id="B" value="B" style="display:none;">
<input type="text" id="C" value="xxx fail xxxxxx">
</body>
自己贴出去看下效果,呵呵,我看还行
[解决办法]
没显示是因为button的容器被隐藏了,你只设置了button显示灭用
        if (resultValue.indexOf("Fail") != -1) {
            alert(button.value);
            //element.stlye.visibility="visible";
            button.value = 'Fail';
            button.parentNode.stlye.display = ''; ////////设置容器显示而不是button
            button.style.backgroundColor = 'red';
        } else {
            alert(button.value);
            //element.stlye.visibility="visible";
            button.value = 'Pass';
            button.parentNode.stlye.display = ''; ////////设置容器显示而不是button
            button.style.backgroundColor = 'green';
        }


AJAX实现
<script type="text/javascript">
    function ajaxcheck(btn) {
        var f = btn.form;
        $.ajax({ url: 'monitorServlet', data: $(f).serialize(), type: 'POST', dataType: 'html'


          , success: function (data) {
              var fail = ata.indexOf("Fail") != -1;
              $('#report').val(fail ? 'Fail' : 'Pass').css('backgroundColor', fail ? 'red' : 'green').parent().show()
          }
          , error: function (xhr) { alert('动态页出错\n\n' + xhr.responseText); }
        });
        return false; //注意return false阻止表单提交,因为按钮类型为submit的会提交表单
    }
</script>
<input id="monitor" name="monitor" tabindex="4" type="submit" onclick='this.form.act.value="monitor";return ajaxcheck(this)' value="Monitor">

热点排行