丶xiaoHai
2019-09-18 21:22
采纳率: 96.8%
浏览 1.4k

关于js函数调用不起作用的问题

今天在学习ajax的时候,按照课本上的步骤,但是最后没有任何效果


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>search Suggest</title>
<script type="text/javascript" src="/js/ajax.js"></script>
<script type="text/javascript">

    var trSrc;
    //设置下拉提示框的位置
    function setDivPosition() {
        alert("error");
        var input = document.getElementById("inputWord");
        var listdiv = document.getElementById("wordsListDiv");
        listdiv.style.left = (input.offsetLeft)+"px";
        listdiv.style.border = "blue 1px solid";
        listdiv.style.top = (input.offsetTop+input.offsetHeight)+"px";
        listdiv.style.width = (input.offsetWidth)+"px";
    }
    function search() {
        alert("search?");
        var inputWord = document.getElementById("inputWord").value;
        var url = "SearchSuggest";
        var params = "inputWord="+inputWord;
        sendRequest(url,params,"POST",display);
    }
    function display() {
        alert("display?");
        if(httpRequest.readyState == 4){
            if(httpRequest.status == 200){
                var xmlDoc = httpRequest.responseXML;
                clearDivData();
                changeDivData(xmlDoc);
            }else{
                alert("您请求的界面有异常!");
            }
        }
    }

    // 清除下拉框中的数据
    function clearDivData(){
        alert("clearDiv");
        var tbody = document.getElementById("wordsListTbody");
        vat trs = tbody.getElementsByTagName("tr");
        for(var i=trs.length-1;i>0;i--){
            tbody.removeChild(trs[i]);
        }
    }

    // 设置用户选中条目的背景色
    function setBgColor() {
        if(trSrc){
            trSrc.style.backgroundColor = "white";
        }
        trSrc = event.srcElement;
        trSrc.style.backgroundColor = "gray";
    }

    // 将用户选中的条目显示在文本框中
    function setText(){
        alert("setText");
        document.getElementById("inputWorld").value = trSrc.firstChild.data;
        document.getElementById("wordsListDiv").style.visibility = "hidden";
    }

    // 实际将数据加入下拉提示框
    function changeDivData(xmlDoc) {
        alert("changeDiv");
        var words = xmlDoc.getElementsByTagName("word");
        var tbody = document.getElementById("wordsListTbody");
        for(i=0;i<words.length;i++){
            var newTr = document.createElement("tr");
            var newCell = document.createElement("td");
            var wordText = words[i].firstChild.data;
            var textNode = document.createTextNode(wordText);
            newCell.onmouseover = setBgColor;
            newCell.onclick = setText;
            newCell.appendChild(textNode);
            newTr.append(newCell);
            tbody.appendChild(newTr);
        }
        if(words.length>0){
            document.getElementById("wordsListDiv").style.visibility = 'visible';
        }else{
            document.getElementById("wordsListDiv").style.visibility = 'hidden';
        }
    }


</script>
</head>
<body onload="setDivPosition()">
<p>搜索字符串:<input type="text" id="inputWord" onkeyup="search()"></p>
<div id="wordsListDiv" style="position:absolute;visibility:hidden">
    <table id="worksListTable">
        <tbody id="wordsListTbody"><tr><td>test</td></tr></tbody>
    </table>
</div>

</body>
</html>

其中就是body标签调用的onload,然后文本框调用了onKeyUp,在两个函数里面都加了一条alert语句,然后运行的时候还是什么反应都没有,求大佬给看一下是什么原因

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • 天际的海浪 2019-09-18 22:45
    已采纳

    有一处 var 写成了 vat

    已采纳该答案
    打赏 评论
  • 毕小宝 2019-09-19 09:15

    F12 看看浏览器的控制台是不是有 js 错误。

    打赏 评论

相关推荐 更多相似问题