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

在HTML页面的body中有一个按钮，它从onclick事件中调用Javascript函数，而在head中是我希望以更持久的结果运行的Javascript函数。为什么js函数不会永久更改html代码？

<!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的知识不足！

来源

2015-02-08 AlbanMar31

你能澄清你的意思是“更永久”吗？ – wnbates 2015-02-08 15:28:07

您是否希望这些值默认显示？ – wnbates 2015-02-08 15:30:06

当我点击按钮时，该函数将运行，但HTML更改不是永久性的：下一秒，所有内容都会在Firefox浏览器中恢复到原始状态。 – AlbanMar31 2015-02-08 15:33:56

将onclick按钮更改为包含“return false;”。此时按钮导致页面在运行脚本后重新加载。

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

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

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

来源

2015-02-08 15:37:20 wnbates

您的代码无法正常工作的原因是，当按钮被点击时，表单被提交，并且由于操作被设置为""整个页面将重新加载自身。尝试将onsubmit添加到您的形式是这样的：

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

来源

2015-02-08 15:35:07

我不知道可以在没有表单标签的情况下编写输入标签。谢谢我检查它相当准确！ – AlbanMar31 2015-02-08 15:40:54

使用

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

使按键不执行表单提交到一个空的URL（动作标签不能为空）。

来源

2015-02-08 15:36:47 halafi

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

回答

相关问题