Javascript不会连接到html元素

Question

我想在输入和段落之间建立连接，段落将显示价格*人数。因此，如果它最初花费7 000为一，那么如果输入会说2，那么它将花费14 000.它适用于此页面，但由于某种原因不在我的网页上。对不起，我对这些家伙太可怕了：/

＆＃13;

＆＃13;

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;

  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();

  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

function playPause(btn, vid) {
  var vid = document.getElementById(vid);

  if (vid.paused) {
    vid.play();
    btn.innerHTML = '<img class="video-btns" src="http://localhost/prosjekt_reiseklubb/images/icons/pause_icon.png" />';
  } else {
    vid.pause();
    btn.innerHTML = '<img class="video-btns" src="http://localhost/prosjekt_reiseklubb/images/icons/play_icon.png" />';
  }
}

function vidMute(btn, vid) {
  var vid = document.getElementById(vid);

  if (vid.muted) {
    vid.muted = false;
    btn.innerHTML = '<img class="video-btns" src="http://localhost/prosjekt_reiseklubb/images/icons/sound_icon.png" /> ';
  } else {
    vid.muted = true;
    btn.innerHTML = '<img class="video-btns" src="http://localhost/prosjekt_reiseklubb/images/icons/sound_icon_muted.png" /> ';
  }
}

var numberOfGuests = document.getElementById("numberOfGuests");
var txtPrice = document.getElementById("txtPrice");
var txtToPrice = document.getElementById("txtToPrice");
var price = 7000;

numberOfGuests.oninput = function() {
  if (numberOfGuests.value > 0) {
    txtToPrice.innerHTML = (Number(numberOfGuests.value) + 1) * price;
  } else {
    txtToPrice.innerHTML = 7000;
  }
}

＆＃13;

.header {
  background: linear-gradient(0deg, rgba(187, 243, 249, 1), rgba(70, 139, 186, 1));
  top: 0px;
  width: 100%;
  height: 70px;
}

#logo {
  display: block;
  position: absolute;
  margin-top: 2px;
  margin-left: 100px;
  z-index: 1;
}

#logo:hover {
  position: absolute;
  border-radius: 100px;
  box-shadow: 0px 0px 200px 5px #f5ff84;
}

.language {
  display: block;
  position: relative;
  margin-left: -70px;
  margin-top: 0px;
  margin-bottom: -50px;
  padding-left: 8px;
  padding-right: 8px;
  border: none;
  width: 50px;
}

.language:hover {
  background: linear-gradient(0deg, rgba(187, 243, 249, 1), rgba(70, 139, 186, 1));
  border-radius: 5px;
  box-shadow: 0px 0px 0px 1px;
}


/* Dropdown Button */

.dropbtn {
  margin: 0;
  padding-top: 5px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 42px;
  height: 40px;
  font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
  font-size: 20px;
  line-height: 40px;
  color: #000;
  background-color: transparent;
  border: none;
  cursor: pointer;
}


/* Dropdown button on hover & focus */

.dropbtn:hover,
.dropbtn:focus {
  background: linear-gradient(0deg, rgba(187, 243, 249, 1), rgba(70, 139, 186, 1));
  border-radius: 5px;
  box-shadow: 0px 0px 1px 0px;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
  padding-right: 10px;
  margin-top: 10px;
  float: right;
  padding-left: 75px;
  border: none;
}


/* search option */

#myInput {
  border-box: box-sizing;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  font-family: verdana;
  padding: 16px 0px 15px 20px;
  border: none;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  right: 0;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 20px 20px;
  text-decoration: none;
  font-size: 16px;
  font-family: verdana;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #DBDBDB;
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}

#menu_icon {
  width: 20px;
  height: 17px;
  padding-right: 7px;
}


/* reiser link */

#rl {
  pointer-events: none;
  cursor: default;
}

fieldset {
  border: none;
}

.form-booking {
  background: linear-gradient(0deg, rgba(187, 243, 249, 1), rgba(70, 139, 186, 1));
  margin-top: 140px;
  margin-left: 30%;
  width: 45%;
  border-radius: 10px;
  box-shadow: 0px 0px 50px 0px;
  margin-bottom: 82px;
}

.input-boxes {
  border: solid;
  background: #fff;
  font-size: 100%;
  font-family: "ff-din-round-web", "ff-din-round-web-2", arial, helvetica, calibri, sans-serif;
  border: 1px solid #668c98;
  border-radius: 3px;
  text-fill-color: #002f3d!important;
  margin-left: 15%;
  margin-top: 10px;
  padding: 5% 5% 5% 5%;
  box-shadow: 0px 0px 20px 0px;
}

.box-wrapper {
  display: inline-flex;
  width: 100%;
  height: 120px;
}


/* Fornavn og Email */

.box-FEm {
  margin-left: 10%;
  width: 50%;
}

.box-FEm:hover {
  zoom: 1.2;
}


/* Etternavn og Mobilnummer */

.box-EtM {
  margin-left: 0.1%;
  width: 50%;
}

.box-EtM:hover {
  zoom: 1.2;
}

.label-text-FEm {
  font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
  font-size: 100%;
  margin-left: 10%;
}

.label-text-EtM {
  font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
  font-size: 100%;
  margin-left: 1%;
}

p {
  font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
}


/*select-country-box*/

#scb {
  border: solid;
  background: #fff;
  font-size: 100%;
  font-family: "ff-din-round-web", "ff-din-round-web-2", arial, helvetica, sans-serif;
  border: 1px solid #668c98;
  border-radius: 3px;
  text-fill-color: #002f3d!important;
  margin-left: 45%;
  margin-top: 10px;
  padding: 5% 5% 5% 5%;
  box-shadow: 0px 0px 20px 0px;
}


/*label-text-choose-country*/

#ltcc {
  margin-left: 45%;
}

#tb {
  float: right;
  margin-right: 10%;
  margin-top: -10px;
  border: none;
}

#bestill-btn {
  width: 20%;
  margin-left: 40%;
}

#bestill-btn:hover {
  border-radius: 30px;
  box-shadow: inset 0px 0px 10px 1px;
}

.footer {
  background-color: #333;
  width: 100%;
  height: 70px;
}


/*footer-text*/

.ftl {
  position: absolute;
  color: #FFF;
  display: block;
  font-size: 17px;
  margin-top: 25px;
  margin-left: 45%;
  width: 229px;
  height: 20px;
  font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
  border: none;
}

.ftr {
  position: relative;
  color: #FFF;
  display: block;
  float: right;
  margin-top: 25px;
  font-size: 17px;
  margin-right: 10%;
  width: 130px;
  height: 20px;
  font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
  border: none;
}

.footer-100 {
  position: absolute;
  bottom: 0;
}


/* footer-text-100 */

.f-txt-100 {
  color: #FFF;
  display: block;
  padding-top: 10px;
  margin-left: 40%;
  font-size: 17px;
  font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;
}


/* footer-media-icons*/

#fmi {
  margin-left: 5%;
}

.footer-media {
  display: inline-block;
  padding-top: 10px;
  float: left;
  margin-left: 1%;
  width: 50px;
}

＆＃13;

<div class="wrapper">

  <div class="header">
    <div>
      <!-- start div1 -->
      <a href="index.php"> <img id="logo" src="http://localhost/prosjekt_reiseklubb/images/palm_logo_round.png"> </a>


      <div class="dropdown">
        <a href="http://localhost/prosjekt_reiseklubb/english/"><img class="language" src="http://localhost/prosjekt_reiseklubb/images/icons/english_icon.png"></a>
        <a href="bestill.php"><button class="dropbtn">BESTILL</button></a>

        <button onclick="myFunction()" class="dropbtn"><img id="menu_icon" src="http://localhost/prosjekt_reiseklubb/images/icons/menu_icon.png">MENY</button>

        <div id="myDropdown" class="dropdown-content">
          <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
          <a id="rl" href="#">Reiser</a>
          <a href="brasil.php"> &nbsp&nbsp&nbsp <img src="http://localhost/prosjekt_reiseklubb/images/icons/Flag_of_Brazil.png"> &nbsp Brasil</a>
          <a href="kroatia.php"> &nbsp&nbsp&nbsp <img src="http://localhost/prosjekt_reiseklubb/images/icons/flag_of_croatia.png"> &nbsp Kroatia</a>
          <a href="thailand.php"> &nbsp&nbsp&nbsp <img src="http://localhost/prosjekt_reiseklubb/images/icons/Flag_of_Thailand.png"> &nbsp Thailand</a>
          <a href="om_oss.php">Om oss</a>
        </div>
        <!--end myDropdown -->
      </div>
      <!-- end dropdown -->

    </div>
    <!-- end div1 -->

  </div>
  <!-- end header -->


  <div class="main">

    <form class="form-booking" action="registrert.php" method="GET">
      <!-- start form -->
      <fieldset>
        <p style="font-weight: ">Presonlig Informasjon</p>
        <br>


        <div class="box-wrapper">
          <!-- start box-wrapper for fornavn and etternavn -->
          <div class="box-FEm">
            <!-- start fornavn -->
            <label class="label-text-FEm" for="fornavn">Fornavn* </label>
            <br>
            <input class="input-boxes box-FEm" type="text" name="fornavn" id="fornavn" required autofocus placeholder="Fornavn" pattern="[a-åA-Å]{2,}" title="Fornavnet må inneholdet minst 2 bokstaver">
          </div>
          <!-- end fornavn -->

          <div class="box-EtM">
            <!-- start etternavn -->
            <label class="label-text-EtM" for="etternavn">Etternavn* </label>
            <br>
            <input class="input-boxes box-EtM" type="text" name="etternavn" id="etternavn" required placeholder="Etternavn" pattern="[a-åA-Å]{2,}" title="Etternavnet må minst ha 2 bokstaver">
          </div>
          <!-- end etternavn -->
        </div>
        <!-- end box-wrapper for fornavn and etternavn -->

        <br>
        <br>

        <div class="box-wrapper">
          <!-- start box-wrapper for email and mobilnummer -->
          <div class="box-FEm">
            <!-- start email -->
            <label class="label-text-FEm" for="email">Email* </label>
            <br>
            <input class="input-boxes box-FEm" type="text" name="email" id="email" required placeholder="Email" pattern="[a-åA-Å]{3,}@[a-åA-Å]{3,}[.]{1}[a-åA-Å]{2,}" title="eksempel@hotmail.com">
          </div>
          <!-- end email -->

          <div class="box-EtM">
            <!-- start mobilnummer -->
            <label class="label-text-EtM" for="mobil">Mobilnummer* </label>
            <br>
            <input class="input-boxes box-EtM" type="tel" name="mobilnummer" id="mobilnummer" required placeholder="Mobilnummer" pattern="[0-9]{8}" title="Vennligst skriv inn minst 8 siffere">
          </div>
          <!-- end mobilnummer -->
        </div>
        <!-- end box-wrapper for email and mobilnummer -->

        <br>
        <br>

        <div class="box-wrapper">
          <div class="box-FEm">
            <!-- start Postnr -->
            <label class="label-text-FEm" for="postnr">Postnr* </label>
            <br>
            <input class="input-boxes box-FEm" type="text" name="postnr" id="postnr" required placeholder="Postnr" pattern="[0-9]{4}" title="Vennligst skriv inn posadressen med minst 4 siffere">
          </div>
          <!-- end postnr -->

          <div class="box-EtM">
            <!-- start Poststed -->
            <label class="label-text-EtM" for="city, country">Poststed* </label>
            <br>
            <input class="input-boxes box-EtM" type="text" name="city, country" id="city, country" required placeholder="By, Land" pattern="[a-åA-Å]{2,}[,]{1} [a-åA-Å]{2,}" title="Poststedet må inneholde minst 2 bokstaver deretter komma (,) så mellomrom pluss minst 2 nye bokstaver">
          </div>
          <!-- end poststed -->
        </div>

        <br>
        <br>

        <div class="box-wrapper">
          <!-- start box-wrapper for land and date -->
          <div class="box-FEm">
            <!-- start land-div -->
            <label id="ltcc" for="land">Velg Land* </label>
            <br>
            <select id="scb" style="width:60%;" name="land" required title="Vennligst velg land ved å trykke på boksen">
							<option value=""></option>
							<option value="brazil">Brasil</option>
							<option value="croatoa">Croatia</option>
							<option value="thailand">Thailand</option>
						</select>
          </div>
          <!-- end land-div -->
        </div>
        <!-- end box-wrapper for land and date -->

        <br>
        <p>* Må utfylles </p>

      </fieldset>

      <br>

      <fieldset>
        <p style="font-weight: bold;">Bestillingsinformasjon</p>

        <p>For en person koster turen <span id="txtPrice">7000 </span>kroner</p>
        <br>

        <label style="font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;" for="numberOfGuests">Antall medreisende: </label>
        <input id="numberOfGuests" type="number" name="numberOfGuests" min="0" max="6" title="Vennligst sett inn antall medreisende ved bruk av knappene eller tastatur.">

        <br>
        <br>

        <label style="font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;" for="numberOfRooms">Antall rom: </label>
        <span style="padding-left: 65px;"> <input type="number" name="numberOfRooms" min="1" max="6"> </span>

        <p>Ønsker du middag på flyet?</p>
        <label for="jaMiddag">Ja: </label><input id="jaMiddag" type="radio" name="middag" value="jaMiddag">
        <label for="ingenMddag">Nei: </label><input id="ingenMddag" type="radio" name="middag" value="ingenMddag">

        <div id="tb">
          <p>Totalt <span id="txtToPrice">7000 </span>kroner</p>
        </div>
        <br>

        <input type="image" id="bestill-btn" src="http://localhost/prosjekt_reiseklubb/images/bestill_button.png" alt="Bestill">
      </fieldset>
    </form>
    <!-- end form -->

  </div>
  <!-- end main -->


  <div class="footer">
    <div id="fmi">
      <!-- start footer-media -->
      <a href="https://www.facebook.com/"> <img class="footer-media" src="http://localhost/prosjekt_reiseklubb/images/icons//facebook_icon.png"> </a>
      <a href="https://twitter.com/"> <img class="footer-media" src="http://localhost/prosjekt_reiseklubb/images/icons/twitter_icon.png"> </a>
      <a href="https://www.instagram.com/?hl=en"> <img class="footer-media" src="http://localhost/prosjekt_reiseklubb/images/icons/instagram_icon.png"> </a>
      <a href="https://www.youtube.com"> <img class="footer-media" src="http://localhost/prosjekt_reiseklubb/images/icons/youtube_icon.png"> </a>
      <a href="mailto:webmaster@example.com"> <img class="footer-media" src="http://localhost/prosjekt_reiseklubb/images/icons/email_icon.png"> </a>
    </div>
    <!-- end footer-media -->


    <div class="ftl">Copyright © 2017 LET's travel </div>

    <div class="ftr">Laget av LET AS</div>


  </div>
  <!-- end footer -->

</div>
<!-- end wrapper -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果你查看你的JavaScript代码，你会发现拼写错误。在该行：

var txtToPrice = document.getElementById("txtToprice");

您使用小写p而不是大写P拼写txtToprice。如果您更改此代码，则代码应该有效。

Answer 2

为什么要在输入值中加1？如果某个值只是您的成本的倍数，则默认为0 ..

var numberOfGuests = document.getElementById("numberOfGuests");
    var txtPrice       = document.getElementById("txtPrice");
    var txtToPrice     = document.getElementById("txtToPrice");
    var price          = 7000;

    numberOfGuests.oninput = function() {
        if (numberOfGuests.value.length){
            txtToPrice.innerHTML = (Number(numberOfGuests.value)) * price;
        } else {
            txtToPrice.innerHTML = 0;
        }
    }

#tb{
  float: right;
  margin-right: 10%;
  margin-top: -100px; 
  border: none;
}

<fieldset>
<p style="font-weight: bold;">Paymentinformation</p>

<p>It costs <span id="txtPrice">7000 </span>for one person</p>
<br>

<label style="font-family: 'Embedded-DINWebPro', 'DIN Next W01 Regular', Arial, sans-serif;" for="numberOfGuests">Number of people: </label>
<input id="numberOfGuests" type="number" name="numberOfGuests" min="0" max="6">

<br>
<br>

<div id="tb">
   <p>Total <span id="txtToPrice">0</span></p>
</div>
<br>

</fieldset>

Answer 3

从我的阅读方式来看，问题是“如何使用HTML和JavaScript观察表单更改并显示总计。”最好是简化而不是尝试处理所提供的所有额外代码。 https://jsfiddle.net/sheriffderek/6uv795gc/

<form id='myForm'>

  <div class='input-w'>
    <span class='label'>price</span>
    <input type='number' rel='price' value='75' />
  </div>

  <div class='input-w'>
    <span class='label'>number</span>
    <input type='number' rel='number' value='1' />
  </div>

  <p>
    <span rel='total'></span>
  </p>

</form>

...

// (jQuery included - to keep things readable)

var $myForm = $('#myForm');
var $price = $myForm.find('[rel="price"]');
var $number = $myForm.find('[rel="number"]');
var $total = $myForm.find('[rel="total"]');

var $inputs = $('#myForm').find('input');

$inputs.on('change', function() {
  var total = $price.val() * $number.val();
  $total.html(total);
}).trigger('change'); // once to start off