Как создать кнопку с новым текстом при нажатии? - PullRequest
Новая
       6

Как создать кнопку с новым текстом при нажатии?

2 голосов
/ 26 марта 2020

Невероятно начинающий кодер здесь. Например, полный новичок, кроме Tumblr и Neopets, которые учат меня, как читать и заниматься основами c мастеринг.

Возможно, я откусил больше, чем могу пережить этот проект, кто-нибудь готов помочь?

Требуется 5 кнопок в одном столбце, где «при щелчке» изменяется текст. Я заставил его работать на 1, но добавив 5 на той же странице все кнопки go случайным образом, и я думаю, что они нуждаются в индивидуальных идентификаторах, но я не знаю, как это сделать. 

    <!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>

Ответы [ 3 ]

0 голосов
/ 26 марта 2020

Я бы сделал это так для большей ремонтопригодности: 

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>
0 голосов
/ 26 марта 2020

Мой путь ... 

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>
0 голосов
/ 26 марта 2020

Вам не нужно несколько функций для достижения этой цели. Просто проверьте значение нажатой в данный момент кнопки и установите соответствующее значение.

Попробуйте выполнить следующее: 

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>
...