проблема с отображением результатов js в wordpress

Question

Есть код на js в wordpress. При нажатии на кнопку на секунду отображаются результаты и страница перезагружается. Как исправить? Вот код:

function func() {
  let exampleInputrost = Number(document.getElementById("exampleInputrost").value);
  let exampleInputves = Number(document.getElementById("exampleInputves").value);
  let doksorubicin = 60;
  let ciklophosphamid = 600;

  function square_body_chemotherapy(exampleInputrost, exampleInputves) {
    let weitfloatsquare = Math.pow(exampleInputrost, 0.5);
    let heightfloatsquare = Math.pow(exampleInputves, 0.5);
    let square_body = 0.0167 * weitfloatsquare * heightfloatsquare;
    return square_body.toFixed(1);
  }
  let res = square_body_chemotherapy(exampleInputrost, exampleInputves);
  let doksorubicin_doza = doksorubicin * res;
  let ciklophosphamid_doza = ciklophosphamid * res;
  document.getElementById("doks").innerHTML = doksorubicin_doza;
  document.getElementById("cikl").innerHTML = ciklophosphamid_doza;
  document.getElementById("res").innerHTML = res;
}

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Введите рост в сантиметрах:</label>
    <input type="text" class="form-control" id="exampleInputrost"></div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Введите вес в килограммах:</label>
    <input type="text" class="form-control" id="exampleInputves"></div>
  <button type="submit" class="btn btn-primary btn-lg" onclick="func()">Submit</button>
</form>
<p id="res"></p>
<p id="doks"></p>
<p id="cikl"></p>

Answer 1

Это не проблема Wordpress. У любого события в js есть стандартное поведение, в том числе у нажатия на кнопку. Если вы не хотите, чтобы отрабатывало стандартное поведение, передавайте в функцию событие (вот так: function func(e) {...}), а внутри предотвращайте стандартное поведение через e.preventDefault().

Примерно так можно сделать:

let button = document.querySelector('#submit');
button.onclick = function func(e) {
    e.preventDefault(); // Предотвращение стандартного поведения
    let exampleInputrost = Number(document.getElementById("exampleInputrost").value);
    let exampleInputves = Number(document.getElementById("exampleInputves").value);
    let doksorubicin = 60;
    let ciklophosphamid = 600;
    function square_body_chemotherapy(exampleInputrost, exampleInputves) {
    let weitfloatsquare = Math.pow(exampleInputrost, 0.5);
    let heightfloatsquare = Math.pow(exampleInputves, 0.5);
    let square_body = 0.0167 * weitfloatsquare * heightfloatsquare;
    return square_body.toFixed(1);
  }
let res = square_body_chemotherapy(exampleInputrost, exampleInputves);
let doksorubicin_doza = doksorubicin * res;
let ciklophosphamid_doza = ciklophosphamid * res;
document.getElementById("doks").innerHTML = doksorubicin_doza;
document.getElementById("cikl").innerHTML = ciklophosphamid_doza;
document.getElementById("res").innerHTML = res;
}

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Введите рост в сантиметрах:</label>
    <input type="text" class="form-control" id="exampleInputrost"></div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Введите вес в килограммах:</label>
    <input type="text" class="form-control" id="exampleInputves"></div>
  <button id='submit' type="submit" class="btn btn-primary btn-lg" onclick="func()">Submit</button>
</form>
<p id="res"></p>
<p id="doks"></p>
<p id="cikl"></p>

БЛОГ НА HUSL

проблема с отображением результатов js в wordpress

Ответы (1 шт):