How do I create a button with new text on click?

Question

Incredibly novice coder here. Like, complete beginner aside from Tumblr and Neopets teaching me how to read and do basic tinkering.

I've maybe bitten off more than I can chew on this project, anybody willing to help?

Needing 5 buttons in a single column where "on click" the text changes. I got it to work for 1, but adding 5 on the same page all the buttons go random and I think they need individual IDs, but I have no idea how to do that.

user_7461381 · Answer

You do not need multiple functions to achieve that. Simply check the value of the currently clicked button and set the value accordingly.

Try the following way:

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;
}

user_1913729 · Answer

I would do it like this for more maintainability:

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;
}

user_10669010 · Answer

My way...

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;
}

Did I still take the time to correct your code to help you?




  
   sample code

How do I create a button with new text on click?

3 Answers