How to make paragraph visible when click on button?-CodePudding

¨ I need that when click button it appear my paragraph

      <button  type="button">SUMBIT</button>
      <p id="d-c" >Thanks for contacting <strong>Deni Beatz</strong>,your message has been sent 6 <u>Reply of Deni Beatz will be send you on mail with <strong>Contact</strong> on fastest type possible</u></p>
      <script>
        
      </script>

CodePudding user response：

Assign a eventListener to your button and afterwards use the toggle funktion. take aa look to the exmaple below:

const btn = document.querySelector('.con-button');

btn.addEventListener('click', () => {
  const dc = document.querySelector('#d-c');
  dc.classList.toggle('hide')
})

.hide {
  display: none;
}

      <button  type="button">SUMBIT</button>
      <p id="d-c" >Thanks for contacting <strong>Deni Beatz</strong>,your message has been sent 6 <u>Reply of Deni Beatz will be send you on mail with <strong>Contact</strong> on fastest type possible</u></p>

CodePudding user response：

you can implement this as follows :

HTML

<button id="myButton" onclick="showParagraph()">SUMBITe</button>
<p id="myParagraph" style="display: none;">This is a paragraph.</p>

function showParagraph() {
  document.getElementById("myParagraph").style.display = "block";
}

you can use getElementByClassName too. here I presented an Id for elements. if you want to hide the paragraph again you can use a condition and change "block" to "none"

CodePudding user response：

  <button  type="button" onClick = "visiBiliti()"enter code here>SUMBIT</button>
    <p id="d-c" >Thanks for contacting <strong>Deni 
       Beatz</strong>,your message has been sent 6 <u>Reply of Deni Beatz will 
      be send you on mail with <strong>Contact</strong> on fastest type p 
      possible</u>
   </p>
      <script>
        const visiBiliti = ()=>{
          document.getelementById("d-c").style.visibiliti="visible"
        }
      </script>

CodePudding user response：

function hideP(){
document.getElementById("d-c").style.display = "none"
}

  <button  onclick="hideP()" type="button">SUMBIT</button>
      <p id="d-c" >Thanks for contacting <strong>Deni Beatz</strong>,your message has been sent 6 <u>Reply of Deni Beatz will be send you on mail with <strong>Contact</strong> on fastest type possible</u></p>

CodePudding user response：

You can use JavaScript to add an event listener to the button that listens for a click event, and then toggle the visibility of the paragraph using the style.display property. Here's an example of how you can do this:

const button = document.querySelector('.con-button');
const paragraph = document.querySelector('#d-c');

// Hide the paragraph on page load
paragraph.style.display = 'none';

// Add click event listener to the button
button.addEventListener('click', () => {
  // toggle the display property of the paragraph
  if (paragraph.style.display === 'none') {
    paragraph.style.display = 'block';
  } else {
    paragraph.style.display = 'none';
  }
});

In the example above, we are first selecting the button and paragraph elements using the querySelector method. Then, we are hiding the paragraph element by setting its display property to none. Next, we are adding a click event listener to the button that listens for a click event. Inside the event listener, we are using an if-else statement to toggle the display property of the paragraph between block and none depending on its current value.

You can also use css to hide the paragraph and use toggle method to show it on button click.

.d-c{
   display: none;
}

const button = document.querySelector('.con-button');
const paragraph = document.querySelector('#d-c');

// Add click event listener to the button
button.addEventListener('click', () => {
  // toggle the class of the paragraph
  paragraph.classList.toggle('d-c');
});

In this example, we are hiding the paragraph using css and using classList.toggle method to show/hide the class on button click.