Toggle text inside a button-CodePudding

I want the text to change whenever I toggle the open contact btn to "close contact" and when I click on it, It reverts back to "open contact" and continues that way.

Should I give it an id and then use the arrow function and add eventListener, Or should I just use plain onclick?

const btn = document.getElementById("click_contact")
const form = document.getElementById("message_form")

btn.addEventListener('click', () => {
  form.classList.toggle('open')
})

<div >
  <button id="click_contact" >open contact</button>
</div>

CodePudding user response：

The easiest way to to just add a line that toggle the Text with textContent between 2 defined text as below:

const btn = document.getElementById("click_contact")
const form = document.getElementById("message_form")

btn.addEventListener('click', () => {
  let text = btn.textContent;
  btn.textContent = text == 'OPEN CONTACT' ? 'CLOSE CONTACT' : 'OPEN CONTACT';
})

* {
  margin: 0;
  padding: 0;
  font-family: "poppins";
  box-sizing: border-box;
}

.btn_sub {
  margin: 10px 35%;
  border-radius: 3px;
}

.btn3 {
  position: relative;
  background: transparent;
  border-top: 1px solid var(--maincolor);
  border-bottom: 1px solid var(--maincolor);
  border-left: none;
  border-right: none;
  padding: 6px 12px;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: black;
  overflow: hidden;
  transition: 0.5s ease all;
  cursor: pointer;
  z-index: 12;
}

.btn3:hover {
  color: var(--primarycolor);
}

.btn3::before {
  content: '';
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  cursor: pointer;
  height: 100%;
  background-color: var(--maincolor);
  transition: 0.5s ease all;
}

.cta-btn3 {
  color: black;
}

.cta-btn3::before {
  transform: translate(-50%, -50%) rotate(45deg);
  width: 100%;
  height: 0;
  z-index: -1;
}

.cta-btn3:hover::before {
  height: 500%;
  width: 100%;
  transition: 0.5s ease all;
}

.cta_btn_contact {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div >
  <button id="click_contact" >open contact</button>
</div>

CodePudding user response：

You can use ternary operator to change the textContent of the button based on its present content.

const btn = document.getElementById("click_contact")
//const form = document.getElementById("message_form")
const div = document.getElementById("testDiv")

btn.addEventListener('click', () => {
  btn.textContent = btn.textContent === "open contact" ? "close contact" : "open contact";
  div.classList.toggle('open')
})

* {
  margin: 0;
  padding: 0;
  font-family: "poppins";
  box-sizing: border-box;
}

.btn_sub {
  margin: 10px 35%;
  border-radius: 3px;
}

.btn3 {
  position: relative;
  background: transparent;
  border-top: 1px solid var(--maincolor);
  border-bottom: 1px solid var(--maincolor);
  border-left: none;
  border-right: none;
  padding: 6px 12px;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 1px;
  color: black;
  overflow: hidden;
  transition: 0.5s ease all;
  cursor: pointer;
  z-index: 12;
}

.btn3:hover {
  color: var(--primarycolor);
}

.btn3::before {
  content: '';
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  cursor: pointer;
  height: 100%;
  background-color: var(--maincolor);
  transition: 0.5s ease all;
}

.cta-btn3 {
  color: black;
}

.cta-btn3::before {
  transform: translate(-50%, -50%) rotate(45deg);
  width: 100%;
  height: 0;
  z-index: -1;
}

.cta-btn3:hover::before {
  height: 500%;
  width: 100%;
  transition: 0.5s ease all;
}

.cta_btn_contact {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#testDiv{
  width: 50px;
  height: 50px;
  background: yellow;
}

#testDiv.open {
  background: green;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- CONTACT -->
  <div >
    <button id="click_contact" >open contact</button>
  </div>
  
  <div id="testDiv"></div>
</body>

</html>