带有消失 div 的 Javascript 形式，将值从一个 div 传送到另一个 div

Question

我正在制作一个多页表单，客户可以在其中输入他们的信息，系统会根据该信息给出价格。

这个想法是有几个 div，通过点击按钮来显示或消失，客户在每个 div 上输入一些信息，然后最终的 div 获取所有这些信息并返回包含分割和总计的价格。

我对 Javascript 很陌生，但我已经编写了下面的代码。它本质上做了它必须做的一切，但它不会“记住”div 之间输入的值。

我的猜测是我可能需要使用 GET 或 POST 才能使其正常工作，但我不知道在哪里以及如何进行。非常感谢所有帮助!

注意:该脚本还包括一个计算器，它使用 Google Maps API 来计算客户地址与我们的营业地址之间的距离，然后根据该距离返回取货和返回价格。该脚本可以工作，但输出也不会“记住”最后一个 div 中的价格分割。

如果有帮助，可以从此处下载整个页面作为 .html 文件:https://drive.google.com/file/d/0B-xbN3H6Mm2SLUpKZ0pWR0Z2d28/view?usp=sharing

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
directionsDisplay = new google.maps.DirectionsRenderer();

function initialize() {

  var melbourne = new google.maps.LatLng(-37.813187, 144.96298);
  var myOptions = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: melbourne
  }
}

function calcRoute() {
  var start = "Ceresstraat 11, Stadskanaal, Netherlands";
  var end = document.getElementById("end").value;
  var distanceInput = document.getElementById("distance");

  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK && (response.routes[0].legs[0].distance.value / 1000 < 20)) {
      directionsDisplay.setDirections(response);
      distanceInput.innerHTML = "Het ophalen en terugbrengen van uw auto is gratis!";
      document.getElementById('naar5').style.display = "initial"
    } else if (status == google.maps.DirectionsStatus.OK && (response.routes[0].legs[0].distance.value / 1000 > 19)) {
      directionsDisplay.setDirections(response);
      distanceInput.innerHTML = "Het ophalen en terugbrengen van uw auto kost &euro;" + Math.round(response.routes[0].legs[0].distance.value / 1000) + ",-";
      document.getElementById('naar5').style.display = "initial"
    } else {
      distanceInput.innerHTML = "Het adres lijkt niet te kloppen. Probeer het nogmaals of neem contact op voor een vrijblijvende offerte"
    }

  });
}


var kteken = document.getElementById('kteken');
var merk = document.getElementById('merk');
var model = document.getElementById('model');
var vsnel = document.getElementById('vsnel');
var hbser = document.getElementById('hbser');
var prijs1 = document.getElementById('prijs1');
var prijs2 = document.getElementById('prijs2');
var prijs3 = prijs1 + prijs2;

function naarscherm2() {
  document.getElementById('kteken').value;
  document.getElementById('scherm1').style.display = "none";
  document.getElementById('scherm2').style.display = "block";

}

function naarscherm3() {
  document.getElementById('merk').value;
  document.getElementById('model').value;
  document.getElementById('scherm2').style.display = "none";
  document.getElementById('scherm3').style.display = "block";
  document.getElementById('merkmodelvraag').innerHTML = "Hoe veel versnellingen heeft uw " + merk + " " + model;
  document.getElementById('homepage-module').style.width = "500px";
}

function naarscherm4() {
  document.getElementById('scherm3').style.display = "none";
  document.getElementById('scherm4').style.display = "block";
  document.getElementById('homepage-module').style.height = "200px";
}

function naarscherm5() {
  document.getElementById('scherm4').style.display = "none";
  document.getElementById('scherm5').style.display = "block";
  document.getElementById('homepage-module').style.height = "300px";
}

function bereken() {
  if (document.getElementById('vsnel').value = "5 versnellingen") {
    document.getElementById('prijs1').innerHTML = 695
  } else {
    document.getElementById('prijs1').innerHTML = 795
  }
  document.getElementById('prijs2').innerHTML = Math.round(response.routes[0].legs[0].distance.value / 1000) + ",-";
  document.getElementByID('prijs3').innerHTML = prijs3
}

    body {
      width: 700px;
    }
    #homepage-calculator {
      width: 100%;
      height: 394px;
      display: flex;
      background-image: url("http://www.aircostadskanaal.nl/wp-content/uploads/2016/05/Versnellingsbak-Revisie-Potgieter.png");
    }
    #homepage-module {
      width: 350px;
      height: 150px;
      margin: auto;
      background: linear-gradient(#0879bd, #42c3e7);
      background: -webkit-linear-gradient(#0879bd, #42c3e7);
      /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(#0879bd, #42c3e7);
      /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(#0879bd, #42c3e7);
      /* For Firefox 3.6 to 15 */
      border: 5px solid #1d334e;
      border-radius: 25px;
    }
    #kenteken {
      background-image: url("http://www.aircostadskanaal.nl/wp-content/uploads/2016/05/Kenteken.png");
      background-repeat: no-repeat;
      width: 241px;
      height: 50px;
      margin: auto;
      padding: 5px;
    }
    #kteken {
      width: 210px;
      height: 40px;
      font-size: 1.5em;
      float: right;
      background: transparent;
      border: none;
    }
    #ktekenknop {
      width: 56px;
      height: 34px;
      border: 1px solid;
      border-color: #ccc #ccc #bbb;
      border-radius: 3px;
      background: #e6e6e6;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 15px 17px rgba(255, 255, 255, 0.5), inset 0 -5px 12px rgba(0, 0, 0, 0.05);
      color: rgba(0, 0, 0, 0.8);
      font-size: 12px;
      font-size: 1em;
      line-height: 1;
      padding: .6em 1em .4em;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
      float: right !important;
      margin-top: -35px;
    }
    #scherm1 {
      display: block;
      width: 90%;
      margin: auto;
      text-align: center;
      color: white;
    }
    #scherm2 {
      display: none;
      width: 90%;
      margin: auto;
      text-align: center;
      color: white;
    }
    #scherm3 {
      display: none;
      width: 90%;
      margin: auto;
      text-align: center;
      color: white;
    }
    #scherm4 {
      display: none;
      width: 90%;
      margin: auto;
      text-align: center;
      color: white;
    }
    #naar5 {
      display: none;
    }
    #scherm5 {
      display: none;
      width: 90%;
      margin: auto;
      text-align: center;
      color: white;
    }
    #knop-blauw {
      display: inline-block;
      height: 50px;
      width: 170px;
      border-radius: 10px;
      margin: auto;
      margin-top: 25px;
      background: -webkit-linear-gradient(#6e99d4, #4d76ae);
      /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(#6e99d4, #4d76ae);
      /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(#6e99d4, #4d76ae);
      /* For Firefox 3.6 to 15 */
      background: linear-gradient(#6e99d4, #4d76ae);
      /*Standard Syntax*/
      color: white;
      text-align: center;
      text-decoration: bold;
      font-size: 1.5em;
      line-height: 2em;
    }
    #knop-rood {
      display: inline-block;
      height: 50px;
      border-radius: 10px;
      margin: auto;
      background: linear-gradient(#bd0425, #a91527);
      background: -webkit-linear-gradient(#bd0425, #a91527);
      /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(#bd0425, #a91527);
      /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(#bd0425, #a91527);
      /* For Firefox 3.6 to 15 */
      color: white;
      text-align: center;
      text-decoration: bold;
      font-size: 1.5em;
      line-height: 2em;
      width: 170px !important;
    }
    #eindtabel {
      width: 100%;
    }
    td {
      text align: right;
    }
    td:first-child {
      text-align: left;
    }

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="homepage-calculator">
  <div id="homepage-module">
    <div id="scherm1">
      <h2 style="color:white;text-align:center;font-weight:bold;">Bereken uw Prijs</h2>
      <div id="kenteken">
        <input id="kteken">
        <button id="ktekenknop" type="button" onclick="naarscherm2()">OK</button>
      </div>
      <!-- kenteken -->
    </div>
    <!-- scherm1 -->
    <div id="scherm2">
      <h3>Uw auto</h3>
      <input label="merk" id="merk" value="Merk" onFocus="this.value='';">
      <br />
      <input label="model" id="model" value="Model" onFocus="this.value='';">
      <br/>
      <button id="merkmodel" onclick="naarscherm3()">OK</button>
    </div>
    <!-- scherm2 -->
    <div id="scherm3">
      <p id="merkmodelvraag"></p>
      <select id="vsnel">
        <option value="volvo">5 versnellingen</option>
        <option value="saab">6 versnellingen</option>
      </select>
      <br />
      <br/>
      <button onclick="naarscherm4()">Verder</button>
    </div>
    <!-- scherm3 -->
    <div id="scherm4">
      <h3>Haal- en Breng-service</h3>
      <p>
        <!--<label for="start">Start: </label>
    				//<input type="text" name="start" id="start" />-->

        <label for="end">Vul hier uw postcode of straat- en plaatsnaam in:</label>
        <br />
        <input type="text" name="end" id="end" />

        <input type="submit" value="OK" onclick="calcRoute()" />
      </p>
      <p>
        <label for="distance"></label>
        <p name="distance" id="distance" readonly="true" /></p>
      </p>
      <button onclick="naarscherm5()" id="naar5">Verder</button>
    </div>
    <!-- scherm4 -->
    <div id="scherm5" onload="bereken">
      <h3>Uw Prijs</h3>
      <table id="eindtabel">
        <tbody>
          <tr>
            <td>Versnellingsbak revisie</td>
            <td id="prijs1"></td>
          </tr>
          <tr>
            <td>Haal- en Breng-Service</td>
            <td id="prijs2"></td>
          </tr>
          <tr>
            <td>Demontage</td>
            <td>&euro; 395,-</td>
          </tr>
          <tr>
            <th>Totaal</th>
            <td id="prijs3"></td>
          </tr>
        </tbody>
      </table>
      <br />
      <br />
      <div id="knop-blauw"><a style="text-decoration:none;color:white;" href="../over-ons/online-afspraak-maken/">Afspraak</a>
      </div>
      <div id="knop-rood"><a style="text-decoration:none;color:white;" href="../contact">Contact</a>
      </div>
    </div>
    <!-- scherm5 -->
  </div>
  <!-- homepage-module -->
</div>
<!-- homepage-calculator -->

Answer 1

确保您确实存储了值，例如:

function naarscherm2() {
  document.getElementById('kteken').value;
  document.getElementById('scherm1').style.display = "none";
  document.getElementById('scherm2').style.display = "block";
}

存储“kteken”值(就像您在该函数上所做的那样):

function naarscherm2() {
  kteken = document.getElementById('kteken').value;
  document.getElementById('scherm1').style.display = "none";
  document.getElementById('scherm2').style.display = "block";
  alert(kteken);
}