html onclick不断重定向到javascript的功能答案

【问题标题】：html onclick keeps redirecting to a function of javascripthtml onclick不断重定向到javascript的功能
【发布时间】：2020-04-12 10:04:30
【问题描述】：

我正在通过单击按钮调用函数。当我按下按钮时，它执行我的功能会从屏幕上删除所有内容并在我的功能内显示按钮。一切正常，但为什么它会从屏幕上删除所有内容。如何让它只运行函数但在点击函数之前保留以前的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 上找到的所有内容都对我有用。

【问题讨论】：

document.write 将删除您拥有的所有内容。而是使用append。

标签： javascript html forms redirect

【解决方案1】：

write() 方法主要用于测试：如果在一个 HTML 文档完全加载后使用，它将删除所有现有的 HTML。

此方法不用于测试时，常用于向document.open()方法打开的输出流中写入一些文本。请参阅下面的“更多示例”

在此处查看完整文档：https://www.w3schools.com/jsref/met_doc_write.asp

如果你想在不清理整个 HTML 的情况下添加一些节点，试试append https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append

【讨论】：

【解决方案2】：

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>

【讨论】：

为什么要投反对票？最初我发布了错误的代码，现在已更正。还有其他不赞成投票的理由吗？
如果表单为空，它会创建该按钮并让我下载。但如果我填写表格，它只会刷新，下载按钮会闪烁 0.1 秒。
@EvaldasBlauzdziunas - this creates an input field than flashes for 1second and disappears?它没有消失，请运行代码。
好的，谢谢你，我在表单中使用 onsubmit="return false" 让它工作。

【解决方案3】：

当您尝试执行 document.write 时，Document 指的是整个 html 页面。它会写在整个页面上...... 可以有几个解决方法，但我会建议这个

为要添加元素的元素指定类。
通过您在第一步中分配给元素的类获取元素

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

如果你想保留已经存在的东西

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

如果您只想添加新元素并丢弃以前存在的所有内容

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

【讨论】：