从外部js设置html元素中的值

Question

我有一个网页。 它需要输入电话号码并在目录中搜索该号码是否存储。 然后显示人员姓名和电话号码。 我正在用 html 和 javascript 做这个。 搜索结果由外部js文件设置。 但问题是在设置值之后

document.getElementById("result").innerHTML=res;

它只会在不到 1 秒的时间内显示和消失。 如何解决这个问题呢？ 这是我的 html 代码-

<html>
<head>
    <title> Eureca </title>
    <link href="../Student Info Search Engine/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <div class="header"> </div>
     <div class="container">
        <form>
            <input type="text" id="search" onChange="func1()"> <br/>
            <input type="button" id="btn" value="Search"> </button>
        </form>
        <!-- <p id="result"> </p> -->
     </div>
     <div class="result"> </div>
     <script src="../Student Info Search Engine/design.js" type="text/javascript"> </script>
</body>

这是javascript代码-

function func1(){

    var str;
    var students=[];
    str=document.getElementById("search").value;
    if(str[0]=='+'){
        alert("Invalid format");
        return;
    }

    if(str.length>=2){
        if(isnum(str)){
            //alert("The number is "+str);
            if(str[0]=='0' && str[1]=='1' && str.length<=11){
                var res,i,out=[];
                out=phone(str);
                res="";
                for(i=0;i<out.length;i++){
                    res+=out[i].name+" "+out[i].phn+"\n";
                }
                document.getElementById("result").innerHTML=res;
            }
            else if(str[0]=='1' && (str[1]=='3' || str[1]=='4') && str.length<=7){

            }
            else{
                alert("Invalid input");
                return;
            }
        }
        else{
            alert("The text is "+str);
        }
    }
    else{
        alert("Please enter at least 2 characters");
    }
}

我没有发布完整的 js 代码，因为它会使帖子变得很长。

Answer 1

您可以尝试将<button id="btn"> Search </button>替换为<input type="button" id="btn" value = "Search"></button>

Answer 2

如果您的问题在单击提交按钮后值消失，那么这里是解决方案：

 <html>
      <head>
        <title></title>
        <meta content="">
        <style></style>
      </head>
      <body class="background-color">
          <div class="header"> </div>
             <div class="container">
                <form>
                    <input type="text" id="search" onChange="func1()"> <br/>
                    <a href="javascript: void(0);" class="btn btn-primary" onclick="func1()">Submit</a>
                </form>
                <p id="result"> </p>
             </div>
      </body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
      <script >
      function func1(){

        var str = [];
        var students=[];
        str=document.getElementById("search").value;
        if(str[0]=='+'){
            alert("Invalid format");
            return;
        }

        if(str.length>=2){
            if(str){
                //alert("The number is "+str);
                if(str[0]=='0' && str[1]=='1' && str.length<=11){
                    var res,i,out=[];
                    out=str;
                    res="";
                    for(i=0;i<out.length;i++){
                        res+="name" +" "+"number"+"\n";
                    }
                    document.getElementById("result").innerHTML=res;
                }
                else if(str[0]=='1' && (str[1]=='3' || str[1]=='4') && str.length<=7){

                }
                else{
                    alert("Invalid input");
                    return;
                }
            }
            else{
                alert("The text is "+str);
            }
        }
        else{
            alert("Please enter at least 2 characters");
        }
    }
      </script>
    </html>

我添加了这个而不是按钮：

<a href="javascript: void(0);" class="btn btn-primary" onclick="func1()">Submit</a>

这是JSFiddle上的示例

Answer 3

我已经解决了这个问题。 刚刚添加了一个按钮，它从函数中获取输出并将其分配给innerHTML 。 我添加了这一行代码-

<input type="button" id="btn2" value="Show Result" onClick="document.getElementById('result').innerHTML = show_result()">

从外部js设置html元素中的值

问题描述

3 个解决方案

解决方案1
1 2015-07-29 08:09:11

解决方案2
1 2015-07-29 08:21:58

解决方案3
0 已采纳 2015-07-29 12:01:41

从外部js设置html元素中的值

问题描述

3 个解决方案

解决方案1 1 2015-07-29 08:09:11

解决方案2 1 2015-07-29 08:21:58

解决方案3 0 已采纳 2015-07-29 12:01:41

解决方案1
1 2015-07-29 08:09:11

解决方案2
1 2015-07-29 08:21:58

解决方案3
0 已采纳 2015-07-29 12:01:41