如何创建一个单击时包含新文本的按钮？
这里是令人难以置信的新手编码员。就像，除了 Tumblr 和 Neopets 教我如何阅读和进行基本的修补之外，完全是初学者。
我可能对这个项目已经咬牙切齿了，有人愿意帮忙吗？
单列中需要 5 个按钮，“单击”后文本会发生变化。我让它适用于 1，但在同一页面上添加 5 个按钮时，所有按钮都是随机的，我认为它们需要单独的 ID，但我不知道该怎么做。
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: #f0c640;
border: none;
color: #08365F;
padding: 32px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
cursor: pointer;
font-family: 'Quattrocento Sans', sans-serif;
}
</style>
</head>
<body>
<center>
<input type="button" id= "bf3" class="button" value="BF₃" onclick="return change(this);" />
<script type="text/javascript">
function change( bf3 )
{
if (bf3.value === "BF₃" )
bf3.value = "boron trifluoride";
else
bf3.value = "BF₃";
}
</script>
</center>
</body>
</html>
<body>
<center>
<input type="button" id= "sf6" class="button" value="SF₆" onclick="return change(this);" />
<script type="text/javascript">
function change( sf6 )
{
if ( sf6.value === "SF₆" )
sf6.value = "sulfur hexafluoride";
else
sf6.value = "SF₆";
}
</script>
</center>
</body>
</html>
<body>
<center>
<input type="button" id="h2o" class="button" value="H₂O" onclick="return change(this);" />
<script type="text/javascript">
function change( h2o )
{
if ( h2o.value === "H₂O" )
h2o.value = "dihydrogen monoxide (aka water)";
else
h2o.value = "H₂O";
}
</script>
</center>
</body>
<body>
<center>
<input type="button" id="pcl5" class="button" value="PCl₅" onclick="return change(this);" />
<script type="text/javascript">
function change( pcl5 )
{
if ( pcl5.value === "PCl₅" )
pcl5.value = "phosphorus pentachloride";
else
pcl5.value = "PCl₅;
}
</script>
</center>
</body>
</html>
<body>
<center>
<input type="button" class="button" id="n2h4" value="N₂H₄" onclick="return change(this);" />
<script type="text/javascript">
function change( n2h4 )
{
if ( n2h4.value === "N₂H₄" )
n2h4.value = "dinitrogen tetrahydride";
else
n2h4.value = "N₂H₄;
}
</script>
</center>
</body>
</html>
POPMUISE3回答
-
ITMISS
您不需要多个函数来实现这一目标。只需检查当前单击按钮的值并相应地设置该值即可。尝试以下方法：function change(currBtn){ if(currBtn.value == 'BF₃' || currBtn.value == 'boron trifluoride'){ if(currBtn.value == 'BF₃') currBtn.value = 'boron trifluoride'; else currBtn.value = 'BF₃'; } else if(currBtn.value == 'SF₆' || currBtn.value == 'sulfur hexafluoride'){ if(currBtn.value == 'SF₆') currBtn.value = 'sulfur hexafluoride'; else currBtn.value = 'SF₆'; } else if(currBtn.value == 'H₂O' || currBtn.value == 'dihydrogen monoxide (aka water)'){ if(currBtn.value == 'H₂O') currBtn.value = 'dihydrogen monoxide (aka water)'; else currBtn.value = 'H₂O'; } else if(currBtn.value == 'PCl₅' || currBtn.value == 'phosphorus pentachloride'){ if(currBtn.value == 'PCl₅') currBtn.value = 'phosphorus pentachloride'; else currBtn.value = 'PCl₅'; } else if(currBtn.value == 'N₂H₄' || currBtn.value == 'dinitrogen tetrahydride'){ if(currBtn.value == 'N₂H₄') currBtn.value = 'dinitrogen tetrahydride'; else currBtn.value = 'N₂H₄' }}.button { background-color: #f0c640; border: none; color: #08365F; padding: 32px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; margin: 4px 2px; cursor: pointer; font-family: 'Quattrocento Sans', sans-serif;}<center> <input type="button" id= "bf3" class="button" value="BF₃" onclick="change(this);" /></center><center> <input type="button" id= "sf6" class="button" value="SF₆" onclick="change(this);" /></center><center> <input type="button" id="h2o" class="button" value="H₂O" onclick="change(this);" /></center><center> <input type="button" id="pcl5" class="button" value="PCl₅" onclick="change(this);" /></center><center> <input type="button" class="button" id="n2h4" value="N₂H₄" onclick="change(this);" /></center> -
GCT1015
为了提高可维护性，我会这样做：var container = document.getElementById('container');var molecules = [ { formula: "BF₃", name: "boron trifluoride" }, { formula: "SF₆", name: "sulfur hexafluoride" }, { formula: "H₂O", name: "dihydrogen monoxide (aka water)" }, { formula: "PCl₅", name: "phosphorus pentachloride" }, { formula: "N₂H₄", name: "dinitrogen tetrahydride" }];molecules.forEach(function(m) { var showName = false; var btn = document.createElement('input'); btn.type = 'button'; btn.className = 'button'; btn.value = m.formula; btn.addEventListener('click', function() { showName = !showName; btn.value = showName ? m.name : m.formula; }); container.appendChild(btn); container.appendChild(document.createElement('br'));});#container { text-align: center; }.button { background-color: #f0c640; border: none; color: #08365F; padding: 32px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; margin: 4px 2px; cursor: pointer; font-family: 'Quattrocento Sans', sans-serif;}<div id="container"></div> -
莫回无
我的方式...const buttonList = [ [ 'BF₃', 'boron trifluoride' ] , [ 'SF₆', 'sulfur hexafluoride' ] , [ 'H₂O', 'dihydrogen monoxide (aka water)' ] , [ 'PCl₅', 'phosphorus pentachloride' ] , [ 'N₂H₄', 'dinitrogen tetrahydride' ] ];buttonList.forEach(bt=> { let newbt = document.createElement('button') , timOut = null; newbt.className = 'button' newbt.textContent = bt[0] document.documentElement.appendChild( newbt ) newbt.onclick=()=>{ newbt.textContent = bt[1] clearTimeout(timOut) timOut = setTimeout(()=>{ newbt.textContent = bt[0] }, 1500) } })/* orbuttonList.forEach(bt=> { let newbt = document.createElement('button') , LibNum = 0 newbt.className = 'button' newbt.textContent = bt[0] newbt.onclick=()=>{ LibNum = ++LibNum %2; newbt.textContent = bt[LibNum] } document.documentElement.appendChild( newbt ) })*/.button { font-family: 'Quattrocento Sans', sans-serif; font-size: 18px; display: block; margin: .2em auto; padding: 1em; color: #08365F; background-color: #f0c640; border: none; cursor: pointer; text-align: center; min-width: 5em;}我是否还花时间更正您的代码来帮助您？<!DOCTYPE html><html><head> <meta charset='UTF-8'> <title> sample code </title> <style> .button { background-color: #f0c640; border: none; color: #08365F; padding: 32px; display: block; /* must be block to be centered */ font-size: 18px; margin: 4px auto; /* this one replace <center> tag (obsolete) */ cursor: pointer; font-family: 'Quattrocento Sans', sans-serif; } </style></head><body> <input type="button" id="bf3" class="button" value="BF₃" onclick="xchange(this);" /> <input type="button" id="sf6" class="button" value="SF₆" onclick="xchange(this);" /> <input type="button" id="h2o" class="button" value="H₂O" onclick="xchange(this);" /> <input type="button" id="pcl5" class="button" value="PCl₅" onclick="xchange(this);" /> <input type="button" id="n2h4" class="button" value="N₂H₄" onclick="xchange(this);" /> <script> function xchange( btn ) { switch (btn.id) { case 'bf3': btn.value = (btn.value==='BF₃') ? 'boron trifluoride' : 'BF₃'; break; case 'sf6': btn.value = (btn.value==='SF₆') ? 'sulfur hexafluoride' : 'SF₆'; break; case 'h2o': btn.value = (btn.value==='H₂O') ? 'dihydrogen monoxide (aka water)' : 'H₂O'; break; case 'pcl5': btn.value = (btn.value==='PCl₅') ? 'phosphorus pentachloride' : 'PCl₅'; break; case 'n2h4': btn.value = (btn.value==='N₂H₄') ? 'dinitrogen tetrahydride' : 'N₂H₄'; break; } } </script></body></html>
随时随地看视频慕课网APP
相关分类
Html5