如何计算选择 h3 的价格

Question

所以我有这个div和这个函数，当选择其中一个大小时添加一个类。

function Selected(n) {
  var i;
  var price;
  var x = document.getElementsByClassName("SizesId");
  for (i = 0; i < x.length; i++) {
    document.getElementById("size" + i).style.backgroundColor = "#c6c6c6";
    document.getElementById("size" + i).style.color = "black";
    document.getElementById("size" + i).className = "SizesId";
  }
  document.getElementById(n).style.backgroundColor = "#666";
  document.getElementById(n).style.color = "white";
  document.getElementById(n).className += " selected";
}

<div class="Sizes">
  <h3 class="SizesId" onclick="Selected('size0')" id="size0">5</h3>
  <h3 class="SizesId" onclick="Selected('size1')" id="size1">6</h3>
  <h3 class="SizesId" onclick="Selected('size2')" id="size2">7</h3>
  <h3 class="SizesId" onclick="Selected('size3')" id="size3">8</h3>
</div>

如何更改此值：- <h2 id="pretFinal">Pret: 150 RON</h2>

例如，如果选择尺寸 5，价格将为"价格：100 RON"，如果选择尺寸 6，价格将为"价格：120 RON"等。

我无法让它工作，任何帮助都是不胜感激的。

Answer 1

要更新给定元素的文本，#pretFinal以下内容的文本将起作用：

// retrieves the required element via its id property:
document.getElementById('pretFinal')
  // updates the text-content of that element (assuming
  // it exists; if no element is found this will result
  // in an error):
  .textContent =
    // here we concatenate the strings:
    'Pret: ' +
    // the outer-most parentheses prevent the
    // wrapped calculation from concatenated as
    // a String, allowing the result of the
    // calculation to be concatenated:
    (
      // this parenthesis allows the result of
      // the innermost calculation to be
      // multiplied by the 20 (given that
      // the order of precedence in math
      // would otherwise perform the
      // multiplication before the addition):
      (
         // using the '+' to coerce the string,
         // after replacing all ('g') its non-numeric
         // characters ('D' ) with an empty space,
         // to a number to which 5 is added:
          +n.replace(/D/g, '') + 5
        )
        * 20
    // finally we add the remainder of the String to be set:
    ) + ' RON';

function Selected(n) {
  var i, price,
    x = document.getElementsByClassName("SizesId");
  for (i = 0; i < x.length; i++) {
    document.getElementById("size" + i).style.backgroundColor = "#c6c6c6";
    document.getElementById("size" + i).style.color = "black";
    document.getElementById("size" + i).className = "SizesId";
  }
  document.getElementById(n).style.backgroundColor = "#666";
  document.getElementById(n).style.color = "white";
  document.getElementById(n).className += " selected";
  document.getElementById('pretFinal').textContent = 'Pret: ' + (((+n.replace(/size/gi, '') + 5) * 20)) + ' RON';
}

<h2 id="pretFinal">Pret: 150 RON</h2>
<div class="Sizes">
  <h3 class="SizesId" onclick="Selected('size0')" id="size0">5</h3>
  <h3 class="SizesId" onclick="Selected('size1')" id="size1">6</h3>
  <h3 class="SizesId" onclick="Selected('size2')" id="size2">7</h3>
  <h3 class="SizesId" onclick="Selected('size3')" id="size3">8</h3>
</div>

JS小提琴演示。

虽然上述方法有效，但就您在问题中描述的需求而言，这是一种糟糕的方法：内联 JavaScript 导致难以管理、维护和更新代码。更好的方法是使用不显眼的JavaScript，其中事件处理程序使用JavaScript本身进行绑定，在您的情况下会导致以下结果。另外，值得注意的是，CSS比使用JavaScript应用新样式要好得多 - 并且在许多情况下提供了更好的界面。因此，以下方法也使用 CSS 来提供样式：

// using the same named-function, but note that we
// are not explicitly passing in any variables:
function Selected() {
  // defining the variables for use:
  var i, price,
    x = document.getElementsByClassName("SizesId"),
    // 'this' is passed in automatically from the later
    // use of EventTarget.addEventListener():
    clicked = this,
    // finding any currently-selected element, the one
    // that has both the 'SizesID' and 'selected' classes,
    // using document.querySelector() (since there should)
    // be only one element that has both classes):
    existing = document.querySelector('.SizesId.selected');
  // if an element exists with both classes:
  if (existing) {
    // we remove the 'selected' class-name using
    // the HTMLElement.classList API:
    existing.classList.remove('selected');
  }
  // adding the 'selected' class-name to the
  //clicked element:
  clicked.classList.add('selected');
  // setting the textContent of the element identified
  // via the id of 'pretFinal', setting it to the string
  // of the text-content from the clicked element (again using
  // the + to coerce to a number) and then multiplying that with
  // '20' (which again seems to be what you want):
  document.getElementById('pretFinal').textContent = (+clicked.textContent * 20);
}
// finding the elements with the 'SizesId' selector, converting that
// non-live NodeList to an Array and then iterating over that Array
// using Array.prototype.forEach():
Array.from(document.querySelectorAll('.SizesId')).forEach(
  // using an Arrow function, to the currently-selected
  // Array element, of the Array of elements, 'el' to use
  // EventTarget.addEventListener() to bind a 'click'
  // event-listener which will run the named function
  // (here 'Selected') and note the lack of parentheses:
  el => el.addEventListener('click', Selected)
);

以下内容的 CSS 是：

/* setting the styles for the elements
   of this class-name: */
.SizesId {
  color: #000;
  background-color: #c6c6c6;
}
/* setting the styles for the 'selected'
   elements with each of the class-names
   below: */
.SizesId.selected {
  color: #fff;
  background-color: #666;
}
/* this sets the text of 'Pret'
   as the text of the ::before
   pseudo-element (which means
   it doesn't need to be present
   in the HTML, making the String
   concatenation/generation far
   easier): */
#pretFinal::before { 
  content: 'Pret: ';
}
/* this sets the text of 'RON'
   as the text-content of the
   ::after pseudo-element: */
#pretFinal::after {
  content: ' RON';
}

function Selected() {
  var i, price,
    x = document.getElementsByClassName("SizesId"),
    clicked = this,
    existing = document.querySelector('.SizesId.selected');
  if (existing) {
    existing.classList.remove('selected');
  }
  clicked.classList.add('selected');
  document.getElementById('pretFinal').textContent = (+clicked.textContent * 20);
}
Array.from(document.querySelectorAll('.SizesId')).forEach(
  el => el.addEventListener('click', Selected)
);

.SizesId {
  color: #000;
  background-color: #c6c6c6;
}
.SizesId.selected {
  color: #fff;
  background-color: #666;
}
#pretFinal::before { 
  content: 'Pret: ';
}
#pretFinal::after {
  content: ' RON';
}

<h2 id="pretFinal">150</h2>
<div class="Sizes">
  <h3 class="SizesId" id="size0">5</h3>
  <h3 class="SizesId" id="size1">6</h3>
  <h3 class="SizesId" id="size2">7</h3>
  <h3 class="SizesId" id="size3">8</h3>
</div>

JS小提琴演示。

Answer 2

使用这个：

var val = document.getElementById(n).innerHTML;
document.getElementById('pretFinal').innerHTML = 'Price: ' + val * 20 + ' RON';

Answer 3

您可以使用 switch 语句并使用 document.getElementById('id').innerHTML 更改其值

function Selected(n) {
var i;
var price;
switch (n) {
  case 'size0' :
    price = '100';
  break;
  case 'size1' :
    price = '120';
  break;
  case 'size2' :
    price = '140';
  break;
  case 'size3' :
    price = '160';
  break;
}
var x = document.getElementsByClassName("SizesId");
for(i = 0; i < x.length; i++)
    {
        document.getElementById("size" + i).style.backgroundColor = "#c6c6c6";
        document.getElementById("size" + i).style.color = "black";
//        document.getElementById("size" + i).className = "SizesId";
    }
document.getElementById(n).style.backgroundColor = "#666";
document.getElementById(n).style.color = "white";
document.getElementById(n).className += " selected";
document.getElementById("pretFinal").innerHTML = 'Pret:  '+price+' RON';
//SelectedColor(-1);
}

<div class="Sizes">
  <h3 class="SizesId" onclick="Selected('size0')" id="size0">5</h3>
  <h3 class="SizesId" onclick="Selected('size1')" id="size1">6</h3>
  <h3 class="SizesId" onclick="Selected('size2')" id="size2">7</h3>
  <h3 class="SizesId" onclick="Selected('size3')" id="size3">8</h3>
</div>
<h2 id="pretFinal">Pret: 150 RON</h2>

Answer 4

使用这个：

document.getElementById("pretFinal").innerHTML = "YOUR TEXT"