简体   繁体   English

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

[英]Setting value in html element from external js

I have a webpage.我有一个网页。 It takes input phone number and search in the directory if the number is stored or not.它需要输入电话号码并在目录中搜索该号码是否存储。 Then shows the name of the people and the phone number.然后显示人员姓名和电话号码。 I'm doing this with html and javascript.我正在用 html 和 javascript 做这个。 The search result is set by the external js file.搜索结果由外部js文件设置。 But the problem is after setting the value in但问题是在设置值之后

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

it just shows and disappears in less than 1 second.它只会在不到 1 秒的时间内显示和消失。 how to solve this problem ?如何解决这个问题呢 ? here is my html code-这是我的 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>

here is the javascript code-这是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");
    }
}

i didn't post full js code, because it will make the post very long.我没有发布完整的 js 代码,因为它会使帖子变得很长。

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

If your problem with disappearing value after click submit button then here is solution:如果您的问题在单击提交按钮后值消失,那么这里是解决方案:

 <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>

I added this instead of button:我添加了这个而不是按钮:

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

Here is example on JSFiddle这是JSFiddle上的示例

I have solved the problem.我已经解决了这个问题。 Just added one more button which is taking the output from a function and assigning it to innerHTML .刚刚添加了一个按钮,它从函数中获取输出并将其分配给innerHTML I added this one line of code-我添加了这一行代码-

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM