Question

我正在尝试使用innerHTML在标签内包含多个值。这是一个示例，可以更好地解释我的问题。

<div class="form-group">
  <label for="" class="mb-0" id="pointReferral"></label>
</div>

<script type="text/javascript">
  referralCode();

  function referralCode() {
    var pointStart = "12";
    var pointEnd = "40";
    document.getElementById("pointReferral").innerHtml = "Number of Friends invited " + pointStart + "/" + pointEnd + " Friends";
  }
</script>

如您所见，我有两个变量，我不知道如何使用它们，因此它们变成了字符串。谢谢。

Answer 1

这只是语法错误，应该使用innerHTML，应该使用innerHtml。它将进行字符串连接，显示在您有疑问的地方不会有问题。

referralCode();

function referralCode() {
  var pointStart = "12";
  var pointEnd = "40";
  // innerHTML
  //document.getElementById("pointReferral").innerHTML = "Number of Friends invited " + pointStart + "/" + pointEnd + " Friends";
  
  // ES6 way
  document.getElementById("pointReferral").innerHTML=`Number of Friends invited ${pointStart}/${pointEnd} Friends`;
}

<div class="form-group">
  <label for="" class="mb-0" id="pointReferral"></label>
</div>

您可以使用ES6及其新功能。在这里，我向您展示了在字符串中使用变量的ES6方法。但是，除了innerHtml以外，您做得对。

Answer 2

如果您想将innerHTML中的数字转换为字符串，那么您的方法是正确的，如果您要进行数学计算，则从/ like中删除引号""

"Number of Friends invited " + (pointStart/pointEnd) + " Friends"

使用innerHTML插入带有标签的Value

2 个答案: