Javascript 如何在单击时创建包含新文本的按钮？_Javascript_Html_Onclick

Javascript 如何在单击时创建包含新文本的按钮？

javascript html

Javascript 如何在单击时创建包含新文本的按钮？,javascript,html,onclick,Javascript,Html,Onclick,难以置信的新手程序员在这里。比如，除了Tumblr和Neopets教我如何阅读和做基本的修补之外，还有一个完全的初学者在这个项目上，我可能吃得太多了，有人愿意帮忙吗在一列中需要5个按钮，“单击”文本将发生更改。我让它为1工作，但在同一页上添加5所有按钮都是随机的，我认为它们需要单独的ID，但我不知道如何做到这一点 <!DOCTYPE html> <html> <head> <style> .button { background-

难以置信的新手程序员在这里。比如，除了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>


.按钮{
背景色：#f0c640；
边界：无；
颜色：#08365F；
填充：32px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字号：18px；
利润：4倍2倍；
光标：指针；
字体系列：“四分之一世纪无”，无衬线；
}
功能更改（bf3）
{
如果（bf3.value==”BF₃" )
bf3.value=“三氟化硼”；
其他的
bf3.value=“BF₃";
}
功能改变（sf6）
{
如果（sf6.value==”SF₆" )
sf6.value=“六氟化硫”；
其他的
sf6.value=“SF₆";
}
功能改变（h2o）
{
如果（h2o.value==“H₂O）
h2o.value=“一氧化二氢（又名水）”；
其他的
h2o.value=“H₂O”；
}
功能更改（pcl5）
{
如果（pcl5.value==”PCl₅" )
pcl5.value=“五氯化磷”；
其他的
pcl5.value=“PCl₅;
}
功能改变（n2h4）
{
如果（n2h4.value==”N₂H₄" )
n2h4.value=“四水合二氮”；
其他的
n2h4.value=“N₂H₄;
}

实现这一点不需要多个功能。只需检查当前单击按钮的值并相应设置值即可

请尝试以下方法：

功能更改（currBtn）{
如果（当前值=='BF₃' || currBtn.value==‘三氟化硼’）{
如果（当前值=='BF₃')
currBtn.value=‘三氟化硼’；
其他的
currBtn.value='BF₃';
}
否则如果（currBtn.value=='SF₆' || currBtn.value==“六氟化硫”）{
如果（currBtn.value=='SF₆')
currBtn.value=‘六氟化硫’；
其他的
currBtn.value='SF₆';
}
否则如果（currBtn.value=='H₂O’| | currBtn.value==‘一氧化二氢（又名水）’）{
如果（currBtn.value=='H₂O'）
currBtn.value=‘一氧化二氢（又名水）’；
其他的
currBtn.value='H₂O'；
}
否则如果（currBtn.value=='PCl₅' || currBtn.value==“五氯化磷”）{
如果（currBtn.value=='PCl₅')
currBtn.value=‘五氯化磷’；
其他的
currBtn.value='PCl₅';
}
否则如果（currBtn.value=='N₂H₄' || currBtn.value==“四水合二氮”）{
如果（currBtn.value=='N₂H₄')
currBtn.value=‘四水合二氮’；
其他的
currBtn.value='N₂H₄'
}
}

。按钮{
背景色：#f0c640；
边界：无；
颜色：#08365F；
填充：32px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字号：18px；
利润：4倍2倍；
光标：指针；
字体系列：“四分之一世纪无”，无衬线；
}

为了提高可维护性，我会这样做：

var container=document.getElementById（'container'）；
var分子=[
{公式：“BF₃",  名称：“三氟化硼”}，
{公式：“SF₆，名称：“六氟化硫”}，
{公式：“H₂名称：“一氧化二氢（又名水）”，
{公式：“PCl₅，名称：“五氯化磷”}，
{公式：“N₂H₄，名称：“四水合二氮”}
];
分子。forEach（函数（m）{
var showName=false；
var btn=document.createElement（'input'）；
btn.type='按钮'；
btn.className='按钮'；
btn.值=m.公式；
btn.addEventListener（'click'，function（）{
showName=！showName；
btn.value=showName？m.name:m.formula；
});
子容器（btn）；
container.appendChild（document.createElement（'br'））；
})；

#容器{文本对齐：居中；}
.按钮{
背景色：#f0c640；
边界：无；
颜色：#08365F；
填充：32px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字号：18px；
利润：4倍2倍；
光标：指针；
字体系列：“四分之一世纪无”，无衬线；
}

我的方式

const按钮列表=
[[]男朋友₃',  '三氟化硼']
，['平方英尺₆',  '六氟化硫']
，['H₂O'，“一氧化二氢（又名水）'”
，['PCl₅', '五氯化磷']
，['N₂H₄', '四水合二氮']
];
buttonList.forEach（bt=>
{
让newbt=document.createElement（'按钮'）
，timOut=null；
newbt.className='按钮'
newbt.textContent=bt[0]
document.documentElement.appendChild（newbt）
newbt.onclick=（）=>{
newbt.textContent=bt[1]
清除超时（timOut）
timOut=setTimeout（（）=>{newbt.textContent=bt[0]}，1500）
}
})
/*或
buttonList.forEach（bt=>
{
让newbt=document.createElement（'按钮'）
，LibNum=0
newbt.className='按钮'
newbt.textContent=bt[0]
newbt.onclick=（）=>{LibNum=++LibNum%2；newbt.textContent=bt[LibNum]}
document.documentElement.appendChild（newbt）
})
*/

。按钮{
字体系列：“四分之一世纪无”，无衬线；
字号：18px；
显示：块；
保证金：.2em自动；
填充：1em；
颜色：#08365F；
背景色：#f0c640；
边界：无；
光标：指针；
文本对齐：居中；
最小宽度：5em；
}

Best bet没有相同的函数加载次数。而是使用一个函数，其中包含所有IFs。更好的解决方案是使用一个switch语句，而不是多个IFs。您只需要一个函数并包含多个“if”“你需要每一个按钮和标签。它不是实现HTML的正确方法。首先你需要学习HTML的基础知识。而不是一些JavaScript。看看这些材料：下面的人给出了你的问题的解决方案。不要放弃。但是请考虑LO。