Как добавить значение в тег HTML, например тег p, с помощью JavaScript

Я думаю, вам нужно перейти с:

document.getElementsByClassName("result").innerText = answer;

к:

document.getElementById("result").innerText = answer;

И позже в вашем HTML измените на:

<p id = "result"></p>

Но если вам действительно нужен класс в теге p, используйте в JS:

document.querySelector(".result").innerText = answer;

См. документацию по querySelector.

• getElementsByClassName возвращает коллекцию (похожую на массив) элементов, соответствующих указанному имени класса. Он не возвращает ни одного элемента напрямую.
• Вы пытаетесь установить внутреннийHTML непосредственно в коллекции, возвращаемой getElementsByClassName. Это не сработает, поскольку getElementsByClassName возвращает несколько элементов, и вам нужно обновить каждый из них по отдельности.

Вам нужен рефакторинг вашего кода:

• Чтобы решить эту проблему, вам следует перебрать коллекцию, возвращаемую методом getElementsByClassName, и обновить внутренний HTML-код каждого элемента индивидуально.

function bmiCalc() {
  let myheight = document.getElementById("height").value;
  let myweight = document.getElementById("weight").value;

  if (myheight === "" || myweight === "") {
    alert("Please Enter number........")
  } else {
    let ans = myheight / myweight ** 2;
    let resultElements = document.getElementsByClassName("result");
    for (let i = 0; i < resultElements.length; i++) {
      resultElements[i].innerHTML = "The BMI is: " + ans;
    }
  }

  document.getElementById("height").value = "";
  document.getElementById("weight").value = "";
}

<input type = "number" id = "height" name = "height" placeholder = "Enter your height" />
<input type = "number" id = "weight" name = "weight" placeholder = "Enter your weight" />
<button type = "button" value = "submit" onclick = "bmiCalc()">Submit</button>
<p class = "result">Pending....</p>

предпочитаю использовать id="result" вместо класса в теге p и в функции js:

document.getElementById("result")

то вы можете использовать любой из них:

    answer.innerHTML=BMI;
    answer.innerText=BMI;
    answer.textContent=BMI;

если вы хотите class="result", тогда предпочтите

 document.querySelector(".result").innerHTML=BMI;

поскольку селектор getElementByClass выбирает все классы, имеющие classname="result":

для более подробной информации проверьте код:

<form>
  <label for = "height">Please input your height in cms:</label>
  <input id = "height" type = "text" name = "" value = "" placeholder = "height" />
  <label for = "weight">Please input your weight in kgs:</label>
  <input id = "weight" type = "text" name = "" value = "" placeholder = "weight" />
  <button onclick = "BMIcalc()" type = "button" name = "button">Submit</button>
</form>
<h3>Your BMI is:</h3>
<p id = "result"></p>
  

let myHeight = document.getElementById("height");
  let myWeight = document.getElementById("weight");
  let answer = document.getElementById("result");

  function BMIcalc() {
    if (myHeight.value === "" || myWeight.value === "") {
      alert("Please fill in your height and weight!");
    } else {
      const BMI = myWeight.value*100*100 / (myHeight.value * myHeight.value);
      answer.innerHTML=BMI;
    }
  }

Некоторые вещи, которые вы захотите решить:

• Помните, что все, что вы получаете от входных элементов, является строками, поэтому вам нужно parseFloat их, прежде чем вы сможете выполнять с ними математические операции (и всегда parseFloat, а не parseInt, поскольку в JS нет отдельного типа целых чисел, а функция parseInt может делать действительно неожиданные вещи). если вы не знаете, требуется второй аргумент, указывающий, какую базу анализировать)
• Также помните, что абзацы не являются элементами формы, у них нет свойства .value, у них есть свойство .textContent/.innerText, как и у всех обычных (непустых) элементов DOM.
• Очень важно: getElementsByClassName возвращает живую HTML-коллекцию, а не «только один элемент». Если вы хотите выбрать только один элемент, либо присвойте ему id и получите его таким образом, либо используйте document.querySelector с селектором запроса, специфичным для вашего элемента абзаца.
• И наконец: если вам не нужно упаковывать форму и отправлять ее на сервер, вам не нужен тег формы, и вашей кнопке не нужно ничего отправлять.

Бонусный факт: элементы HTML с атрибутом id автоматически доступны на стороне JS под этим именем (при условии, что строка id является допустимым именем переменной JS). Таким образом, <input id = "height".... автоматически станет переменной с именем height на стороне JS, ее не нужно искать в DOM. (Но, конечно, если вы это делаете, не забудьте использовать id имена, которые не конфликтуют со встроенными именами глобальных переменных JS!)

Итак, работая над всем этим:

// By giving everything id attributes, we don't need to search
// for any of the elements involved in the logic we're coding:

calculate.addEventListener(`click`, () => {
  BMI.textContent = ``;
  const h = parseFloat(height.value);
  const w = parseFloat(weight.value);

  // Note that parseFloat does not test if the entire input "was
  // a number", it only parses things up to "when they stop being
  // a number", So we need to check whether the conversion result
  // actually matches the input. If not, that's bad input. So,
  // turn the number back into a string, and see if it matches:
  if (`${h}` !== height.value || `${w}` !== weight.value) {
    return alert(`Please fill in your height in cm and weight in kg`);
  }

  // And let's not give people infinite precision, two
  // digits after the decimal point should be plenty.
  BMI.textContent = (w / (h/100) ** 2).toFixed(2);
});

<!--
  there is no form here, we don't need to send any sort
  of data to a server, we're just doing on-page calculation.
-->     

<div>
  <label for = "height">Please input your height:</label>
  <input id = "height" placeholder = "height in cm">
</div>

<div>
  <label for = "weight">Please input your weight:</label>
  <input id = "weight" placeholder = "weight in kg">
</div>

<button id = "calculate">Calculate</button>

<h3>Your BMI is: <span id = "BMI"></span></h3>