Question

我正在尝试使用indexOf创建合理数量的验证。

save()是按钮的onclick属性 saveDirectionsForm是文字输入的id result是空段落的id。

到目前为止，这是我的代码。单击save()时为什么没有呈现？

<!DOCTYPE html>
<html>
  <head>
    <title>autoComplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="autocomplete.css" type="text/css">
    <script src="jquery.min.js" type="text/javascript"></script>
  </head>
  <body>
  <div id="masterControls">
    <input name="origin-input" id="origin-input" class="controls" type="text"
        placeholder="Enter an origin location">
    <input name="destination-input" id="destination-input" class="controls" type="text"
        placeholder="Enter a destination location">

    <div id="mode-selector" class="controls">
      <input type="radio" name="type" id="changemode-walking">
      <label for="changemode-walking">Walking</label>

      <input type="radio" name="type" id="changemode-bicycling" checked="checked">
      <label for="changemode-bicycling">Bicycling</label>

      <!-- <input type="radio" name="type" id="changemode-transit">
      <label for="changemode-transit">Transit</label> -->

      <input type="radio" name="type" id="changemode-driving">
      <label for="changemode-driving">Driving</label>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;

      <label for="tolls">Avoid Tolls: </label>
      <input id="tolls" type="checkbox" name="tolls" onchange="switchTolls(this)" checked="checked">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;

      <button id="restartMap" class="btn btn-default btn-xs" style="height:80%;top:0;margin-bottom:6px;" onclick="restartMap()" type="button">Restart</button>
    </div>
  </div>

  <div id="saveMapAlert" style="display:none;" class="alert alert-success alert-dismissible" role="alert">
    <button id="saveMapAlertClose" type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  <strong>Nice route!</strong> Do you want to save these directions?&nbsp;&nbsp; <span class="label label-default" id="yesAlert" onclick="yesAlert()">Yes!</span> <span class="label label-danger" id="noAlert" onclick="noAlert()">No!</span>
  </div>

  <div id="saveDirectionsWrapper" class="col-lg-6" style="display:none;margin-bottom:20px;width:25%;">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Email Address" required="required" />
      <span class="input-group-btn">
        <button id="saveDirectionsForm" onclick="save()" class="btn btn-default" type="button">Send!</button>
        <!-- <button id="saveDirectionsForm" onclick="saveDirectionsForm()" class="btn btn-default" type="button"><span class="glyphicon glyphicon-ok"></span></button> -->
      </span>
    </div><!-- input-group -->
  </div><!-- col-lg-6 && saveDirectionsWrapper -->

  <div id="saveMapAlert2" style="display:none;" class="alert alert-danger alert-dismissible" role="alert">
    <button id="saveMapAlertClose2" type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  <strong>Oh snap!</strong> Blah blah!
  </div>

  <p id="result"></p>

    <div id="map"></div>
    <div id="panelWrapper">
      <div id="panel" style="height:100%;width:100%;float:right;"></div>
    </div>

<script>

    function save() {
        var emailString = document.getElementById('saveDirectionsForm').value;
        if (emailString.indexOf("@") > 0) {
          document.getElementById("result").innerHTML = "YES";
        }
      };
</script>

Answer 1

<button id="saveDirectionsForm" onclick="save()"   class="btn btn-default" type="button">Send!</button>

这看起来很奇怪，你试图得到一个按钮的值，它不起作用，你的indexOf方法没有错，

//you are getting it wrong here 
        var emailString =      document.getElementById('saveDirectionsForm').value;

Javascript indexOf没有返回结果

1 个答案: