时间戳

首页 > 解决方案 > 使用javascript在不同的地方显示相同的id

javascript - 使用javascript在不同的地方显示相同的id

问题描述

这就是我想要获得的：单击按钮后，它将显示摘要 div 处的数量值和总成本。但是，数量和总和都没有输出。没有收到错误。

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="try2.css">
    <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
    <script type = "text/javascript"  src = "try2.js" ></script>
</head>
<body>
    <input type="button" id="button1" class="button" value="A-D" />
    <input type="button" id="button2" class="button" value="E-H" />
    <input type="button" id="button3" class="button" value="E-H" />

    <p>
        Button Clicked <span 
        id="display">0</span> Times
    </p>

    <script src="try2.js"></script>
    
    <!-- <input type="reset" value="Reset"/> -->
    <input type="submit" value="Proceed" onclick="proceedButton()" class="proceed-button"/> 

    
    <div class="legend-section">
    </div>
    
    <div class="payment-summary">
        <h2 class="payment-summary-font">Summary</h2>
        <div class="quantity">
            <p class="payment-summary-font-font">Quantity</p>
            <span id="display2"></span>
        </div>
        <div class="sum">
            <p class="payment-summary-font-font">Total Sum ($)</p>
            <span id="total-sum"></span>
        </div>
    </div>
    </body>
</html>

javascript代码：

var buttons = document.getElementsByClassName("button");
var count = 0;
var disp = document.getElementById("display");
var disp2= document.getElementById("display2");
var totalSum = document.getElementById("total-sum");
for (let i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener('click', function() {
    buttons[i].classList.toggle('active');
    if (this.classList.contains("active")) {
      count++;
    } else {
      count--;
    }
    disp.innerHTML = count;
  })
}

document.getElementById("display2").innerHTML = count;
totalSum = disp2 * 12;

标签： javascripthtml

解决方案

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="try2.css" />
    <script
      src="https://kit.fontawesome.com/c8e4d183c2.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <input type="button" id="button1" class="button" value="A-D" />
    <input type="button" id="button2" class="button" value="E-H" />
    <input type="button" id="button3" class="button" value="E-H" />

    <p>Button Clicked <span id="display">0</span> Times</p>
    <!-- <input type="reset" value="Reset"/> -->
    <input
      type="submit"
      value="Proceed"
      onclick="proceedButton()"
      class="proceed-button"
    />

    <div class="legend-section"></div>

    <div class="payment-summary">
      <h2 class="payment-summary-font">Summary</h2>
      <div class="quantity">
        <p class="payment-summary-font-font">Quantity</p>
        <span id="display2"></span>
      </div>
      <div class="sum">
        <p class="payment-summary-font-font">Total Sum ($)</p>
        <span id="total-sum"></span>
      </div>
    </div>
    <!-- Incude script at the end -->
    <script type="text/javascript" src="try2.js"></script>
  </body>
</html>

try2.js

var count = 0;
var disp = document.getElementById("display");
var disp2 = document.getElementById("display2");
var totalSum = document.getElementById("total-sum");

// get all the buttons with class "button"
var buttons = document.getElementsByClassName("button");
for (let i = 0, l = buttons.length; i < l; i++) {
  buttons[i].addEventListener("click", function () { // add onclick evenListener to increment count and store it in "display"
    count++;
    disp.innerHTML = count;
  });
}

// The function you needed when clicking the proceed button
// sets the value of count to "display2"    
// Calculates the total and assigns it to "total-Sum"
function proceedButton() {
  disp2.innerHTML = count;
  totalSum.innerHTML = disp2.innerHTML * 12;
}

推荐阅读