prprprll
2021-04-16 14:41
采纳率: 66.7%
浏览 73

说我找不到函数什么意思ReferenceError: click is not defined?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
                list-style: none;
            }
            #box{
                width: 700px;
                height: 320px;
                margin: 200px auto;
                background-color: red;
            }
            #boxleft{
                float: left;
                width: 350px;
                height: 300px;
                /*background-color: black;*/
                padding: 50px;
            }
            #boxleft img{
                width: 300px;
                height: 200px;
                padding: 20px 8px;
                border-radius: 40%;
            }
            #boxright{
                /*background-color: purple;*/
                width: 250px;
                height: 400px;
                float: right;
            }
            #boxright #btn{
                padding: 20px 10px;
                float: left;
            }
            #boxright li{
                float: left;
                line-height: 20px;
                padding: 20px 20px;
            }
            #boxright li:nth-child(2){
                
                line-height: 20px;
                padding: 20px 50px;
            }
            #boxright li:nth-child(8){
                
                line-height: 20px;
                padding: 20px 0px 20px 50px;
            }
        </style>
        <script>
            function getobj(event){
                            if(window.event){
                                event = window.event;
                                otarget = event.srcElement ||event.otarget;
                            } return otarget;
                    }
            function click(){
                        //获取事物焦点
                var obj = getobj(event);
                           alert(obj.innerHTML);
                            /*window.location.href = "http://image.baidu.com/search/index?tn=baiduimage&word="+obj.innerHTML;*/
                        }
                        //点击事件转成百度图片
                        
                    //鼠标进入
                    function over(){
                          obj2 = getobj(event);
                         var images = document.getElementById("photo");
                         var url = "img/"+obj2.innerHTML+"/1.jpg";
                         /*alert(url);*/
                         images.src=url;
                    }
                    //鼠标移出
                    var a=null;
                    var index=0;
                function out(){
                        var images = document.getElementById("photo");
                        clearTimeout(a);
                            index++;
                            if(index>7){index=1;}
                        var url2 = "img/"+obj2.innerHTML+"/"+"index"+".jpg";
                        images.src=url2;
                        a=setTimeout(out(),20);
                    
                    //改变透明度
                    var op=1;
                    var change=0;
                function changeop(){
                        
                        if(op>=1){
                            change=-0.1;
                        }else if(op>0.4){
                            change=0.1
                        }
                        op = op+change;
                        images.style.opacity="op";
                        
                    }
        </script>
        <!--<script src="./js/fun.js"></script>-->
        
        
    </head>
    <body>
        <div id="box">
            <div id="boxleft">
                <img src="img/tu.jpg" alt="" id="photo">
            
            </div>
            <div id="boxright">
                <div id="btn">
                    <input type="text"  />
                    <input type="button" value="搜索" style="height: 20px;" id="button"></div>
                    <div id="txt">
                        <ul>
                            <li class="thing">兵马俑</li>
                            <li class="thing">川菜</li>
                            <li class="thing">客家土楼</li>
                            <li class="thing">民族乐器</li>
                            <li class="thing">青铜重器</li>
                            <li class="thing">新疆风情</li>
                            <li class="thing">粤菜</li>
                            <li class="thing">中国国宝</li>
                        </ul>
                    </div>
                
            </div>
        </div>
        
        <script>
            
            //获取事件
            var things = document.getElementsByClassName("thing")
            for(var i=0;i<things.length;i++){
                things[i].addEventListener("click",click,true),
                things[i].addEventListener("mouseover",over,true),
                things[i].addEventListener("mouseout",out,true)
            }
            
            var images = document.getElementById("photo");
            var button = document.getElementById("button")
                console.log(button);
            button.onclick = function(){
                var text = button.value;
                if(text!==""){
                    window.location.href = "http://image.baidu.com/search/index?tn=baiduimage&word="+text;
                    }
            }    
            
        </script>
    </body>
</html>

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

2条回答 默认 最新

  • 已采纳

    第一个script代码有问题。大括号不闭合,所以导致click函数没有生成

    第二个问题,

    a = setTimeout(out(), 20);

    这句要改成

    a = setTimeout(out, 20);

    要不会死循环

    已采纳该答案
    2 打赏 评论
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }
    
            #box {
                width: 700px;
                height: 320px;
                margin: 200px auto;
                background-color: red;
            }
    
            #boxleft {
                float: left;
                width: 350px;
                height: 300px;
                /*background-color: black;*/
                padding: 50px;
            }
    
            #boxleft img {
                width: 300px;
                height: 200px;
                padding: 20px 8px;
                border-radius: 40%;
            }
    
            #boxright {
                /*background-color: purple;*/
                width: 250px;
                height: 400px;
                float: right;
            }
    
            #boxright #btn {
                padding: 20px 10px;
                float: left;
            }
    
            #boxright li {
                float: left;
                line-height: 20px;
                padding: 20px 20px;
            }
    
            #boxright li:nth-child(2) {
    
                line-height: 20px;
                padding: 20px 50px;
            }
    
            #boxright li:nth-child(8) {
    
                line-height: 20px;
                padding: 20px 0px 20px 50px;
            }
        </style>
        <!-- <script>
            function getobj(event) {
                if (window.event) {
                    event = window.event;
                    otarget = event.srcElement || event.otarget;
                } return otarget;
            }
            function click() {
                //获取事物焦点
                var obj = getobj(event);
                alert(obj.innerHTML);
                /*window.location.href = "http://image.baidu.com/search/index?tn=baiduimage&word="+obj.innerHTML;*/
            }
            //点击事件转成百度图片
    
            //鼠标进入
            function over() {
                obj2 = getobj(event);
                var images = document.getElementById("photo");
                var url = "img/" + obj2.innerHTML + "/1.jpg";
                /*alert(url);*/
                images.src = url;
            }
            //鼠标移出
            var a = null;
            var index = 0;
            function out() {
                var images = document.getElementById("photo");
                clearTimeout(a);
                index++;
                if (index > 7) { index = 1; }
                var url2 = "img/" + obj2.innerHTML + "/" + "index" + ".jpg";
                images.src = url2;
                a = setTimeout(out(), 20);
    
                //改变透明度
                var op = 1;
                var change = 0;
                function changeop() {
    
                    if (op >= 1) {
                        change = -0.1;
                    } else if (op > 0.4) {
                        change = 0.1
                    }
                    op = op + change;
                    images.style.opacity = "op";
    
                }
        </script> -->
    
    
    
    </head>
    
    <body>
        <div id="box">
            <div id="boxleft">
                <img src="img/tu.jpg" alt="" id="photo">
    
            </div>
            <div id="boxright">
                <div id="btn">
                    <input type="text" />
                    <input type="button" value="搜索" style="height: 20px;" id="button">
                </div>
                <div id="txt">
                    <ul>
                        <li class="thing">兵马俑</li>
                        <li class="thing">川菜</li>
                        <li class="thing">客家土楼</li>
                        <li class="thing">民族乐器</li>
                        <li class="thing">青铜重器</li>
                        <li class="thing">新疆风情</li>
                        <li class="thing">粤菜</li>
                        <li class="thing">中国国宝</li>
                    </ul>
                </div>
    
            </div>
        </div>
    
        <script>
    
    
            var things = document.getElementsByClassName("thing")
            for (var i = 0; i < things.length; i++) {
                things[i].addEventListener("click", click, true),
                    things[i].addEventListener("mouseover", over, true),
                    things[i].addEventListener("mouseout", out, true)
            }
    
            var images = document.getElementById("photo");
            var button = document.getElementById("button")
            console.log(button);
            button.onclick = function () {
                var text = button.value;
                if (text !== "") {
                    window.location.href = "http://image.baidu.com/search/index?tn=baiduimage&word=" + text;
                }
            }
    
    
            function getobj(event) {
                if (window.event) {
                    event = window.event;
                    otarget = event.srcElement || event.otarget;
                } return otarget;
            }
            function click() {
                //获取事物焦点
                var obj = getobj(event);
                alert(obj.innerHTML);
                /*window.location.href = "http://image.baidu.com/search/index?tn=baiduimage&word="+obj.innerHTML;*/
            }
            //点击事件转成百度图片
    
            //鼠标进入
            function over() {
                obj2 = getobj(event);
                var images = document.getElementById("photo");
                var url = "img/" + obj2.innerHTML + "/1.jpg";
                /*alert(url);*/
                images.src = url;
            }
            //鼠标移出
            var a = null;
            var index = 0;
            function out() {
                var images = document.getElementById("photo");
                clearTimeout(a);
                index++;
                if (index > 7) { index = 1; }
                var url2 = "img/" + obj2.innerHTML + "/" + "index" + ".jpg";
                images.src = url2;
                a = setTimeout(out(), 20);
    
                //改变透明度
                var op = 1;
                var change = 0;
                function changeop() {
    
                    if (op >= 1) {
                        change = -0.1;
                    } else if (op > 0.4) {
                        change = 0.1
                    }
                    op = op + change;
                    images.style.opacity = "op";
    
                }
            }
        </script>
    </body>
    
    </html>

    1.首先你写了两个script  2.其次你out()函数少个}。

    1 打赏 评论

相关推荐 更多相似问题