Question 168480 in Html Question posted in
Some basic documentation can be found here.

Can I change a Paragraph’s text by clicking a button using HTML?

i want to change a paragraph text with HTML and JAVASCRIPT by clicking a button. I just found a lot of codes where you can click the button just one time. I need a button which i can click multiple times to change it to the next paragraph. I need to put in more values

I need help to write the code

Tags:

2

Answers


  1. 0

    From what I understood, you want a button that switches between different paragraphs?
    If I understood well, the best way to approach it would be to have an array with all the different paragraphs, and make the button rotate between those. This can be done in HTML and JS.

    Since you’ve not shared any code, I’m going to guess the paragraph and button look like this

    <p id="paragraph">Sample 1</p>
<button onclick="changeParagraph()">Change Paragraph</button>

    To change the paragraph, first you should make an array that contains all the paragraphs

    const paragraphs = [
"Sample 1",
"Sample 2",
"Sample 3",
"Sample 4"]

    This makes a "list" with all the paragraphs you’re going to switch between.
    Then you grab the paragraph element (We will be changing the HTML of this element)

    const paragraph = document.getElementById("paragraph");

    We’ll also make an index variable, that stores in what paragraph we’re in, so we can switch to the next one

    var index = 0;

    With all this prep work done, you can now work on the function. First, we need to increment the index value, but if it’s over the length of the array, go back to zero.

    function changeParagraph(){
  index = index + 1; // Increase the index
  if(index >= paragraphs.length){ index = 0; }

    After that, just replace the content of the <p> element using element.innerHTML and the index as the index of the array.

      paragraph.innerHTML = paragraphs[index];

    With all this together, your code should look like this:

    //Get the paragraph element
const paragraph = document.getElementById("paragraph");
// Make an array with all the paragrahs used
const paragraphs = [
"Sample 1",
"Sample 2",
"Sample 3",
"Sample 4"]

var index = 0; // "carrousel" index

function changeParagraph(){
  index = index + 1; // Increase the index
  if(index >= paragraphs.length){ index = 0; } // If the index is over the amount of paragraphs, go back to the first one
  paragraph.innerHTML = paragraphs[index]; // Set the paragraph's text to the current index's paragraph.
}

    Here’s a JSFiddle to try it out:

    https://jsfiddle.net/9h8Lven5/18/

    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html>
<head>
  <title>Change Paragraph Text</title>
</head>
<body>
  <p id="paragraph">This is the initial paragraph.</p>
  <button onclick="changeParagraph()">Change Paragraph</button>

  <script>

    var paragraphs = [
      "This is the first paragraph.",
      "This is the second paragraph.",
      "This is the third paragraph."
    ];

    var counter = 0;
    var paragraphElement = document.getElementById("paragraph");

    function changeParagraph() {
      paragraphElement.textContent = paragraphs[counter];
      counter = (counter + 1) % paragraphs.length;
      
    }
  </script>
</body>
</html>
    1. In this example, we have an array called paragraphs that stores the different paragraph values you want to cycle through. The counter variable keeps track of the current paragraph index.
    2. When the button is clicked, the changeParagraph() function is called. It updates the textContent property of the paragraphElement to display the corresponding paragraph from the array. Then, it increments the counter by 1 and uses the modulus operator (%) to ensure that the counter wraps around to 0 when it reaches the end of the array.
    3. By using this code, you can click the button multiple times to cycle through the paragraphs in the paragraphs array. Feel free to modify the array paragraphs with additional values or customize the HTML and CSS to fit your requirements.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search