时间戳

首页 > 解决方案 > 如何在单击时创建带有新文本的按钮？

javascript - 如何在单击时创建带有新文本的按钮？

问题描述

令人难以置信的新手编码器。就像，除了 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>

标签： javascripthtmlonclick

解决方案

我的方式...

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)
    }
  })
/* or
buttonList.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 lang='en'>
<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>

推荐阅读