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

使用

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

因此按钮不会执行表单提交到空URL（操作标记不应为空）。

Answer 2

更改按钮点击以包含＆＃34;返回false;＆＃34;。目前，该按钮在运行脚本后导致页面重新加载。

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

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

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

Answer 3

您的代码无法正常工作的原因是，当单击按钮时，表单已提交，并且由于操作设置为""，因此整个页面只会重新加载。尝试在表单中添加onsubmit，如下所示：

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

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

3 个答案: