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

Html – How to replace multiple <blockquote> in textarea using submit button, and find <blockquote >.JavaScript

Here it shows all the IDs. I want it to show only the ID "sert" and not the ID "ranya" Do not show it directly, but through submit button. Find the number of blockquote IDs through a loop​

To modify the provided script to only show blockquotes with the ID "sert" and not "ranya", and to include a submit button to trigger this action, Thats how i would do it, hope it helps you.:

-Add a submit button to your HTML.
-Modify the JavaScript to include an event listener for the button click.
-Update the loop to only select and display blockquotes with the ID "sert".

First, add the submit button to your HTML:

<button id="submitBtn">Show Quotes</button>

<blockquote id="sert-1" contenteditable="true">this is a quote for comment😎</blockquote>
<blockquote id="sert-2" contenteditable="true">this is a quote for comment text1</blockquote>
<blockquote id="ranya-1" contenteditable="true">this is a quote for comment text2</blockquote>
<blockquote id="ranya-2" contenteditable="true">this is a quote for comment text3</blockquote>


Then, modify your JavaScript as follows:

document.getElementById('submitBtn').addEventListener('click', function() {
    const BLOCKQUOTES = document.querySelectorAll('blockquote');
    let text = '';

    BLOCKQUOTES.forEach(blockquote => {
        if (blockquote.id.startsWith("sert")) {
            text += `${blockquote.textContent}.`enter code here` n`;
        }
    });

    let textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
});

/* Styling for the textarea */
textarea {
  border: 2px solid red;
  width: 80vw;
  height: 60vh;
}
Tags:

2

Answers


  1. 0

    You can either make the unused blockquotes invisible by using blockquote.style.display = "none" inside the loop.

    Alternatively if you think you might want the function to run multiple times you can delete the elements altogether by using blockquote.remove() inside the loop

    Login or Signup to reply.
  2. 0

    You will need to fix the way you specify text:

    document.getElementById('submitBtn').addEventListener('click', function() {
    const BLOCKQUOTES = document.querySelectorAll('blockquote');
    let text = '';

    BLOCKQUOTES.forEach(blockquote => {
        if (blockquote.id.startsWith("sert")) {
            text += `${blockquote.textContent}.enter code here n`;
        }
    });
    
    let textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
});
    textarea {
  border: 2px solid red;
  width: 80vw;
  height: 60vh;
}
    <button id="submitBtn">Show Quotes</button>
<blockquote id="sert-1" contenteditable="true">this is a quote for comment&#128526;</blockquote>
<blockquote id="sert-2" contenteditable="true">this is a quote for comment text1</blockquote>
<blockquote id="ranya-1" contenteditable="true">this is a quote for comment text2</blockquote>
<blockquote id="ranya-2" contenteditable="true">this is a quote for comment text3</blockquote>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search