为什么 js 函数不会永久更改 html 代码？

Question

在 HTML 页面的 body 中有一个从 onclick 事件中调用 Javascript 函数的按钮，在 head 中是我希望运行具有更永久结果的 Javascript 功能。

<!Doctype html>
<html lang="fr">
    <head>
    <meta charset="utf-8"/>
       <script type="text/javascript" language="javascript">

       function loadformTest(){
         document.getElementById('departement').value = '31';
         document.getElementById('ville').value = 'toulouse';
         document.getElementById('quoi').value = 'société de services informatiques';
         annuaire = document.getElementById('annuaire');
         recherche = document.getElementById('recherche');
         annuaire.innerHTML = 'Annuaire'
         annuaire.href = "http://www.pagesjaunes.fr/pagesblanches";
         recherche.innerHTML = 'Annuaire'
         recherche.href = "https://google.fr";
      }

      </script>

    </head>
    <body>
     <form id="form" action="" method="post">
         <p>Quoi,Qui : <input id="quoi" name="quiQuoiSaisi" type="text"/></p>
         <p>Ville : <input id="ville" name="ville" type="text"/></p>
         <p>N°Département : <input id="departement" name="departement" type="text"/><p>
         <button onclick="loadformTest()">Valeurs par défaut </button>
     </form>
     <a id="recherche" href="" target="_blank"></a>
     <a id="annuaire" href="" target="_blank"></a>
   </body>
</html>

但是如果在加载页面时在 body 标记中调用相同的函数，则更改是永久性的。

我的问题可能是因为我对 Javascript !

缺乏了解

Answer 1

您的代码不起作用的原因是，当单击按钮时，将提交表单，并且由于操作设置为 ""，整个页面将自行重新加载。尝试像这样向您的表单添加 onsubmit：

<form id="form" action="" method="post" onsubmit="return false;">

Answer 2

使用

<button type="button" onclick="loadformTest()">Valeurs par défaut </button>

所以按钮不会执行表单提交到空 url（操作标签不应为空）。

Answer 3

更改点击按钮以包含 "return false;"。目前，该按钮导致页面在运行您的脚本后重新加载。

<button onclick="loadformTest(); return false;">Valeurs par défaut </button>

或者如果您将按钮的类型指定为按钮（与提交相反，这可能是浏览器的默认设置），则该按钮不会导致刷新。

<button type="button" onclick="loadformTest()">Valeurs par défaut </button>

为什么 js 函数不会永久更改 html 代码？

Why js function does not change the html code permanently?

html

javascript

forms

onclick

onload