更改 DIV 的内容：不同的跨度部分

Question

假设我有以下 DIV:

<div id=div5><span id="name">Hertog-Jan</span><span id="price"></span></div><br>

它有两个 'parts'，第一个是名称（永远不要更改），第二个是价格。最终，我必须使用 API 从荷兰商店 'Albert Heijn' 的网站上检索 Hertog-Jan 的实际价格，但为了知道，我使用随机数生成器在两者之间生成一个随机数100 和 999，并设为 'price':

<script>
  function price (it) {
    var value = (Math.round(((Math.random() * 900) + 100)));
    /* value *= 0.01; */
    document.getElementById(it).innerHTML.price += ": €" + value;
  }

（可能不是最好的）然后像这样调用函数

price('div5');

但是，输出将始终为 Hertog-Jan（无价格出现）。难道我做错了什么？我个人认为这与 innerHMTL.price 有关，但我不确定。我曾经

<div id=div5>Hertog-Jan</div><br>

但后来我必须添加一个选项来按名称、价格等进行排序，所以我认为将名称和价格信息分成两部分会很有用，嗯，'boxes'（你得到这个想法）。

有些人可能已经注意到值 *= 0.01 现在基本上是 'turned off'，这是因为有时，如果一个数字（例如 626）乘以 0.01，它不会不要给我 6.26，而是 6.260000000001。有没有什么办法解决这一问题？我想要 1 到 10 之间的随机数（包括 1，不包括 10）四舍五入到恰好两位小数（当然，它应该总是两位小数）。

Answer 1

只需尝试使用

document.getElementById(it).innerHTML += ": €" + value;

您不需要将 ID 名称放在属性的末尾，因为 .price 不是 .innerHTML

的属性

Answer 2

如果只使用原始 Javscript 修复代码需要一些时间（我习惯一直使用 jquery）。

https://jsfiddle.net/7omqk3qs/

function price (it) {
   var elem = document.querySelector('#'+it+' .price');
   var value = (Math.round(((Math.random() * 900) + 100)));
   console.log(value+' ->random Number');
   /* value *= 0.01; */
   var oldValue = parseInt(elem.innerHTML);

  elem.innerHTML = oldValue + value +' €';
}

忽略 "console.log" 用于调试。

这样做的目的是：首先你需要解析一个id名称。在此示例中，您的 div5。然后它搜索带有 class=price 的元素（参见：querySelector(...' .price')）。

然后是随机数（无论你需要什么 :D）

接下来它使用 parseInt() 获取旧值，所以你不会得到 String

最后它将 price-<span> 的 HTML 内容更改为 oldValue = 值。

查看 jsFiddle 了解更多信息

希望能帮到你

更改 DIV 的内容：不同的跨度部分

Changing content of a DIV: different span parts

html

javascript

innerhtml