动态处理 HTML答案

【问题标题】：Manipulating HTML dynamically动态处理 HTML
【发布时间】：2021-03-10 06:21:02
【问题描述】：

我设计了一个网页（这是来自FrontEndMentor 的一个编码挑战），我一直在为它开发 javascript。下面，您可能会找到网页本身的图片

我的问题与定价滑块有关。切换开关时必须添加 25% 的折扣。我已经编写了 javascript 以将折扣应用于价格，但它只会在我将滑块移动到另一个值（从 16 美元到另一个值并返回到 16 美元）以显示 16.00 美元的折扣时更改价格。我正在尝试动态操作 DOM，当折扣开关被切换时，用户应该立即看到添加的折扣。

我在下面附上了我的 javascript 和 HTML 代码。任何帮助将不胜感激。

const pageviews = ["10K PAGEVIEWS", "50K PAGEVIEWS", 
                    "100K PAGEVIEWS", "500K PAGEVIEWS", "1M PAGEVIEWS"];


// default prices 
let price = [8.00, 12.00, 16.00, 24.00, 36.00];
let i = 0;


const views = document.getElementById("view");
const prices = document.getElementById("demo");

// slider element
const slider = document.getElementById("sliderRange");

button = document.getElementById("buttonID");

// eventlistener to track if the user toggles the discount switch and applies and reverts
// the changes of the prices based on a "counter variable" i. The discount will be toggled if
// the switch is toggled an odd number of times, showing it has been toggled last instead of untoggled
button.addEventListener("click", function(){
        i++;
        if(i%2 !== 0){
            price = price.map((num) => {return num * 0.75;});
        }
        else if(i > 1 && i%2 === 0){
            price = price.map((num) => {return num / 0.75;});
        }
});

views.innerHTML = pageviews[2];
prices.innerHTML = price[2].toFixed(2);


//switch statement to process slider inputs
slider.oninput = function(){

    switch(parseFloat(this.value)){
        case 10.0:
            views.innerHTML = pageviews[0];
            prices.innerHTML = (price[0]).toFixed(2);
            break;

        case 32.5:
            views.innerHTML = pageviews[1];
            prices.innerHTML = (price[1]).toFixed(2);
            break;

        case 55.0:
            views.innerHTML = pageviews[2];
            prices.innerHTML = (price[2]).toFixed(2);
            break;

        case 77.5:
            views.innerHTML = pageviews[3];
            prices.innerHTML = (price[3]).toFixed(2);
            break;

        case 100.0:
            views.innerHTML = pageviews[4];
            prices.innerHTML = (price[4]).toFixed(2);
            break;

        default:
    }
}

滑块和定价的 HTML

  <div class = "views-price">
    <p class = "views" id = "view"></p>
    <p class = "month" id = "months">
      <span id = "dollar">$</span>
      <span id = "demo"></span>
    /month</p>
  </div>

  <div class = "slider-class">
    <input type = "range" min = "10.0" max = "100" 
    value = "55.00" class = "slider" id = "sliderRange" step = "22.5">
  </div>

【问题讨论】：

标签： javascript html

【解决方案1】：

我相信这是因为您没有在 button.addEventListener('click', function(){}); 函数中更新 prices 的值。您只是在移动滑块时更改价格的值，因此即使您单击按钮，在您再次移动滑块之前它也不会更新。

【讨论】：

【解决方案2】：

我会创建一个名为updatePrice 的函数，它只是更新价格。它应该只访问价格变量（或将其作为参数）并将其应用于价格标签。每次以某种方式更改价格时都应该调用此函数

【讨论】：

【解决方案3】：

我想这就是你想要的：

<html>
<head>
  <meta charset="UTF-8">
  <script>
window.addEventListener("load", (event) => {
  const pageviews = ["10K PAGEVIEWS", "50K PAGEVIEWS", 
                    "100K PAGEVIEWS", "500K PAGEVIEWS", "1M PAGEVIEWS"];


  // default prices 
  let price = [8.00, 12.00, 16.00, 24.00, 36.00];


  const views = document.getElementById("view");
  const prices = document.getElementById("demo");

  // slider element
  const slider = document.getElementById("sliderRange");

  //
  // eventlistener to track if the user toggles the discount switch:
  //
  document.getElementsByName("billingperiod")
  .forEach(function(item, idx) {
    item.addEventListener("change", function(){
        //
        // yearly:
        //
        if(this.value == 1) {
          price = price.map((num) => {return num * 0.75;});     
        //
        // monthly:
        //
        } else {
          price = price.map((num) => {return num / 0.75;});             
        }
    
        slider.oninput();
    });
  });

  views.innerHTML = pageviews[2];
  prices.innerHTML = price[2].toFixed(2);


  //switch statement to process slider inputs
  slider.oninput = function(){

    switch(parseFloat(this.value)){
        case 10.0:
            views.innerHTML = pageviews[0];
            prices.innerHTML = (price[0]).toFixed(2);
            break;

        case 32.5:
            views.innerHTML = pageviews[1];
            prices.innerHTML = (price[1]).toFixed(2);
            break;

        case 55.0:
            views.innerHTML = pageviews[2];
            prices.innerHTML = (price[2]).toFixed(2);
            break;

        case 77.5:
            views.innerHTML = pageviews[3];
            prices.innerHTML = (price[3]).toFixed(2);
            break;

        case 100.0:
            views.innerHTML = pageviews[4];
            prices.innerHTML = (price[4]).toFixed(2);
            break;

        default:
    }
  }
});
  </script>
</head>

<body>

  <div class = "views-price">
    <p class = "views" id = "view"></p>
    <p class = "month" id = "months">
      <span id = "dollar">$</span>
      <span id = "demo"></span>
    /month</p>
  </div>

  <div class = "slider-class">
    <input type = "range" min = "10.0" max = "100" 
    value = "55.00" class = "slider" id = "sliderRange" step = "22.5">
  </div>

  Monthly <input type="radio" name="billingperiod" value="0" checked></input> 
  <input type="radio" name="billingperiod" value="1">Yearly</input> billing 25% discount

</body>
</html>

当一个人选择每月/每年的广播时，我们运行

slider.oninput();

更新信息。

我们使用 radio.onchange 事件来避免在用户快速连续点击同一个单选按钮时出现错误切换。

【讨论】：

你不应该只是把答案交给开发者，你应该解释他们的答案有什么问题，然后解释你如何解决这个问题并举例说明。
有时我们可以提出一个解决方案，因为它非常接近问题...