怎么用JS修改当前元素里的子元素的内容

Question

首先，上代码

html部分
<div class="row">
    <div class="col-md-10">
        <div class="form-group">
            <label class="name">姓名：</label>
            <input type="text" name="name" class="form-control" required="required" onchange="showstate(this.value)">
        </div>
    </div>
    <div class="col-md-2">
        <label></label>
        <div id="showstate"></div>
     </div>
</div>
<div class="row">
    <div class="col-md-10">
        <div class="form-group">
            <label class="title">标题：</label>
            <input type="text" name="title" class="form-control" required="required" onchange="showstate(this.value)">
        </div>
    </div>
    <div class="col-md-2">
        <label></label>
        <div id="showstate"></div>
     </div>
</div>

分割一下，JS部分

function showstate(str) {
        if (str.length == 0){
            document.getElementById("showstate").innerHTML = "";
            return;
        }
        if (window.XMLHttpRequest){
            //IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            //IE5, IE6
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById("showstate").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","checkinfo.php?i="+str, true);
        xmlhttp.send();
    }

然后我希望的是，在姓名或者标题下输入完成的时候，在对应的showstate里面能显示对应的提示 (我在checkinfo.php里面写好了查询)

我的JavaScript该怎么改才行呢

Answer 1

在函数里加个参数。把要对应元素的id传过去啊

<div class="row">
    <div class="col-md-10">
        <div class="form-group">
            <label class="name">姓名：</label>
            <input type="text" name="name" class="form-control" required="required" onchange="showstate(this.value,'showstate1')">
        </div>
    </div>
    <div class="col-md-2">
        <label></label>
        <div id="showstate1"></div>
     </div>
</div>
<div class="row">
    <div class="col-md-10">
        <div class="form-group">
            <label class="title">标题：</label>
            <input type="text" name="title" class="form-control" required="required" onchange="showstate(this.value,'showstate2')">
        </div>
    </div>
    <div class="col-md-2">
        <label></label>
        <div id="showstate2"></div>
     </div>
</div>
分割一下，JS部分

function showstate(str,id) {
        if (str.length == 0){
            document.getElementById(id).innerHTML = "";
            return;
        }
        if (window.XMLHttpRequest){
            //IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            //IE5, IE6
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                document.getElementById(id).innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","checkinfo.php?i="+str, true);
        xmlhttp.send();
    }