Question

当用户点击该按钮时，我希望显示<div>。它确实有效，但只显示了一小部分时间，然后隐藏它。

我的代码是：

document.getElementById("near").addEventListener("click", searchField);
function searchField() {
    document.getElementById("locationField").style.display='block';
}

按钮代码：

echo"<div class='row'> 
      <div class='col-md-12'> 
        <input type='submit'  class='btn' name='near' value='Near' id='near'>
        </input>
      </div>
    </div>";

echo"<div class='col-md-10'>
      <div id='locationField'  class='form-group' style='display:none'>
        <label for='autocomplete'>Type location address here</label>
        <form method='post' id='wishInput'>
          <input class='form-control' id='autocomplete' placeholder='Enter your address' onFocus='geolocate()' name='myaddress' type='text'>
          </input>
          <input  name='latitude' id='latitude'>
          <input  name='longitude' id='longitude'/>
          <input type='submit'>
        </form>
      </div>
    </div>";

Answer 1

You should  put Javascript code after HTML then it will work fine 

<?php 
echo"<div class='row'> 
      <div class='col-md-12'> 
        <input type='submit'  class='btn' name='near' value='Near' id='near'>
        </input>
      </div>
    </div>";

echo"<div class='col-md-10'>
      <div id='locationField'  class='form-group' style='display:none'>
        <label for='autocomplete'>Type location address here</label>
        <form method='post' id='wishInput'>
          <input class='form-control' id='autocomplete' placeholder='Enter your address' onFocus='geolocate()' name='myaddress' type='text'>
          </input>
          <input  name='latitude' id='latitude'>
          <input  name='longitude' id='longitude'/>
          <input type='submit'>
        </form>
      </div>
    </div>";
    ?>    
<script type="text/javascript">
    document.getElementById("near").addEventListener("click", searchField);
    function searchField() {
        document.getElementById("locationField").style.display='block';
    }

</script>

Answer 2

你也可以用不同的方式来做，比如

document.getElementById("near").addEventListener("click", searchField);
function searchField() {
    document.getElementById("locationField").setAttribute("style","display : block");
}

在呈现整个PHP代码之后放置JavaScript代码快乐的编码...

如何使用javascript制作一个显示div的按钮？

2 个答案: