Вставка значения с меткой с использованием innerHTML

Question

Я пытаюсь иметь несколько значений внутри метки, используя внутренний HTML. Вот пример, чтобы лучше объяснить мою проблему.

<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

Кажется, у вас ошибка Syntax вместо innerHTML.

document.getElementById("pointReferral").innerHTML= "Number of Friends invited " + pointStart + "/" + pointEnd + " Friends";

Answer 2

Это просто синтаксическая ошибка, надо было использовать innerHTML, использовать innerHtml. Он выполнит конкатенацию строк, у show не возникнет проблем там, где вы сомневались.

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 3

, если вы хотите преобразовать число в строку в innerHTML, тогда ваш метод правильный, если вы хотите выполнить математический расчет, удалите кавычки "" из / как

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