Méthode JS pour réaliser la fonction d'édition en cliquant sur le bouton

Cet article vous présente l'effet modifiable du clic sur des boutons basé sur js à travers un exemple de code. Le code est simple et facile à comprendre, très bon et a une certaine valeur de référence. Les amis qui en ont besoin peuvent s'y référer.

Détails Le code est le suivant :

<script type="text/javascript">
//修改密码
//抓取到的数据
function edit() {
document.getElementById("ps").style.display = "none";
document.getElementById("pw").style.display = "";
document.getElementById("of").style.display = "";
var butt = document.getElementById("btt");
butt.value = "修 改";
butt.onclick = function () {
save();//第二次单击的时候执行这个函数
};
}
//取消健
function off() {
var pass = document.getElementById(&#39;ps&#39;);
var pws = document.getElementById("pw");
var butt = document.getElementById("btt");
document.getElementById("of").style.display = "none",
butt.value = "编 辑";
pws.style.display = "none";
pass.innerHTML = pws.value;
pass.style.display = "";
butt.onclick = function () {
edit();//还原第一次单击的时候执行的函数
};
}
//编辑之后的状态
function save() {
var pass = document.getElementById(&#39;ps&#39;);
var pws = document.getElementById("pw");
var butt = document.getElementById("btt");
butt.setAttribute("type","submit");
butt.value = "编 辑";
pws.style.display = "none";
pass.innerHTML = pws.value;
pass.style.display = "";
butt.onclick = function () {
edit();//还原第一次单击的时候执行的函数
};
}
</script>
</p>
<form action="oneself.php" method="post">
<p style="font: 16px &#39;宋体&#39;;">姓名: <input type="text" name="name" value="张三" /></p>
<p style="font: 16px &#39;宋体&#39;;">账号: <input type="text" name="handset" value="13888888888" /></p>
<p style="font: 16px &#39;宋体&#39;;">密码: <span id="pass" style="border: 1px solid gray; width: 200px;">888888</span> <textarea id="ei" style="display: none;" name="newpass">888888</textarea> <input id="btt" onclick="edit();" type="button" name="btt" value="编 辑" /> <input id="of" style="display: none;" onclick="off();" type="button" name="of" value="取 消" /></p>
</form>

Ce qui précède est l'intégralité du contenu de cet article, je l'espère. sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez suivre le site Web PHP chinois !

Recommandations associées :

Introduction à la politique de même origine JavaScript et à l'accès inter-domaines

Javascript met en œuvre la vente flash de produits analyse du compte à rebours (temps synchronisé avec l'heure du serveur)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!