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

Why js function does not change the html code permanently?

本文关键字：html 代码 js 函数 为什么      更新时间：2023-09-26

在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缺乏了解！

使用

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

因此，该按钮不会向空url执行表单提交（action标记不应为空）。

将按钮onclick更改为包含"return false；"。此时，该按钮会导致页面在运行脚本后重新加载。

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

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

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

您的代码不起作用的原因是，当单击按钮时，表单将被提交，并且由于操作设置为""，整个页面将重新加载。尝试将onsubmit添加到您的表单中，如下所示：

<form id="form" action="" method="post" onsubmit="return false;">
相关文章：