html onclick продолжает перенаправлять на функцию javascript

Question

Я вызываю функцию по нажатию кнопки. Когда я нажимаю кнопку, она выполняет мою функцию, удаляет все с экрана и отображает кнопку внутри моей функции. Все работает хорошо, но почему он удаляет все с экрана. Как сделать так, чтобы он только запускал функцию, но сохранял предыдущие элементы html до нажатия этой функции?

 <div id="form-container">
    <form id="dim_form" action="">
        <div class="bg">
            <label class="form-label-a" for="dimm">Dimension</label>
            <input id="dimm" type="text" />
        </div>
        <div class="bg">
            <label class="form-label-b" for="dimm_upper">Upper tolerance</label>
            <input id="dimm_upper" type="text" required />
        </div>
        <div class="bg">
            <label class="form-label-c" for="dimm_lower">Lower tolerence</label>
            <input id="dimm_lower" type="text" required />
        </div>
        <div class="bg">
            <input class="form-button" type="submit" onclick="data_table();" value="Calculate" />
        </div>
    </form>
</div>

data_table ()

document.write("<input class='download' type='button' id='button-a' value='download xls' />");

Я пытался с помощью кнопки " "вместо отправки. вернуть false, в основном все, что я нашел в Google, и у меня ничего не работает.

Answer 1

Метод write() в основном используется для тестирования: если он используется после полной загрузки документа HTML, он удалит все существующие HTML.

Когда этот метод не используется для При тестировании он часто используется для записи некоторого текста в выходной поток, открытый методом document.open(). См. «Дополнительные примеры» ниже

, см. Полную документацию здесь: https://www.w3schools.com/jsref/met_doc_write.asp

, если вы хотите добавить несколько узлов без очистки всего HTML try append https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

Answer 2

Документ ссылается на всю страницу html, когда вы пытаетесь сделать документ. Записать его можно будет на всей странице .... Может быть несколько способов, но я предложу этот

1. Присвойте класс элементу, к которому вы хотите добавить элемент.
2. Получите элемент по классу, который вы назначаете элементу на первом шаге

var x = document.getElementsByClassName("example");

если вы хотите сохранить то, что уже есть

x.appendChild("whatever you want to add goes here");

если вы хотите добавить только новый элемент и отбросить все ранее существовавшее

x.innerHtml="whatever you want to add goes here";

Answer 3

document.write сотрет все, что у вас было раньше. Вместо этого используйте append.

function data_table() {
  const input = document.createElement('input');
  input.type = "submit";
  input.id = "button-a";
  input.value = "download xls";
  document.querySelector('.bg').appendChild(input);
}

<div class="bg">
  <input class="form-button" type="submit" onclick="data_table();" value="Calculate" />
</div>