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

Setting value in html element from external js

本文关键字：元素 html js 设置 从外部      更新时间：2023-09-26

我有一个网页。它输入电话号码，并在目录中搜索是否存储了该号码。然后显示人名和电话号码。我这样做与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代码，因为它会使文章很长。

你可以试着用<input type="button" id="btn" value = "Search"></button>代替<button id="btn"> Search </button>

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

 <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
的示例

我已经解决了这个问题。只是增加了一个按钮，这是从一个函数的输出，并将其分配给innerHTML。我添加了这一行代码- 

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