Can the text value be read and its strings changed?

Question

Can the text value be read and its strings changed?

I need to modify the message inside an H2 element with the code provided below. I want to change the text from

No results were found for this query: <em class="querytext">

to

"No results were found by hello world!

, but the catch is that I cannot directly edit the HTML code. Is there a way to achieve this using CSS or JavaScript? Maybe using an if condition to detect the specific string and then replacing it upon page load? For example, if the text equals

No results were found for this query:

, then display

"No results were found by hello world!"

.

<div class="search-results">
    <h2>No results were found for this query: <em class="querytext"></em></h2>
</div>

javascript html css

Answer 1

Answer №1

If you're looking to manipulate the DOM using JavaScript, here's an example:

<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
      <script type="text/javascript">
          function updateResultText(text) {
            var resultTextEl = document.querySelector('.search-results > h2');
            if(resultTextEl) {
              resultTextEl.innerText = "No results were found by " + text;
            }
          }
    </script>
    <button onclick="updateResultText('hello world!')">Update Text</button>
   <div class="search-results">
     
    <h2>No results were found for this query: <em class="querytext"></em>
    </h2>
  </div>
  </body>
</html>

Here's the JavaScript code snippet needed:

function updateResultText(text) {
            var resultTextEl = document.querySelector('.search-results > h2');
            if(resultTextEl) {
              resultTextEl.innerText = "No results were found by " + text;
            }
          }

To update the text in the 'h2' element, simply call the updateResultText function with your desired text after 'by'.

Answer 2

If you're looking to manipulate the DOM using JavaScript, here's an example:

<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
      <script type="text/javascript">
          function updateResultText(text) {
            var resultTextEl = document.querySelector('.search-results > h2');
            if(resultTextEl) {
              resultTextEl.innerText = "No results were found by " + text;
            }
          }
    </script>
    <button onclick="updateResultText('hello world!')">Update Text</button>
   <div class="search-results">
     
    <h2>No results were found for this query: <em class="querytext"></em>
    </h2>
  </div>
  </body>
</html>

Here's the JavaScript code snippet needed:

function updateResultText(text) {
            var resultTextEl = document.querySelector('.search-results > h2');
            if(resultTextEl) {
              resultTextEl.innerText = "No results were found by " + text;
            }
          }

To update the text in the 'h2' element, simply call the updateResultText function with your desired text after 'by'.

Answer 3

Answer №2

Try out this vanilla JS solution to modify every h2 element that is a descendant of the class .search-results:

for (let h2 of document.querySelectorAll('.search-results > h2')) {
  if (h2.textContent.search('No results were found for this query') >= 0)
    h2.textContent = 'No results were found by hello world!';
}

<div class="search-results">
  <h2>No results were found for this query: <em class="querytext"></em>
  </h2>
</div>

Answer 4

Try out this vanilla JS solution to modify every h2 element that is a descendant of the class .search-results:

for (let h2 of document.querySelectorAll('.search-results > h2')) {
  if (h2.textContent.search('No results were found for this query') >= 0)
    h2.textContent = 'No results were found by hello world!';
}

<div class="search-results">
  <h2>No results were found for this query: <em class="querytext"></em>
  </h2>
</div>

Answer 5

Answer №3

Previous JavaScript Code

let query = "" // Obtain the username from the backend, URL, or through a simple login form and store it in local storage without using the backend

let newText = 'No results found for this' + query ': <em class="querytext"></em></h2>'

let element = document.querySelector('.search-results h2').innerHTML = newText

Updated to ES5

const query = "" // Obtain the username from the backend, URL, or through a simple login form and store it in local storage without using the backend

const newText = `No results found for this ${query}: <em class="querytext"></em></h2>`

const element = document.querySelector('.search-results h2').innerHTML = newText

Answer 6

Previous JavaScript Code

let query = "" // Obtain the username from the backend, URL, or through a simple login form and store it in local storage without using the backend

let newText = 'No results found for this' + query ': <em class="querytext"></em></h2>'

let element = document.querySelector('.search-results h2').innerHTML = newText

Updated to ES5

const query = "" // Obtain the username from the backend, URL, or through a simple login form and store it in local storage without using the backend

const newText = `No results found for this ${query}: <em class="querytext"></em></h2>`

const element = document.querySelector('.search-results h2').innerHTML = newText

Answer 7

Answer №4

To complete your webpage, place the following script tag at the bottom:

<script type="text/javascript">
            var element= document.querySelector('.search-results > h2');
            if(element) {
             if(element.innerText.indexOf("No results were found for this query")>=0)
                 element.innerHtml="Custom message here";
            }
    </script>

After adding that script, remember to include </body></html> tags.

Answer 8

To complete your webpage, place the following script tag at the bottom:

<script type="text/javascript">
            var element= document.querySelector('.search-results > h2');
            if(element) {
             if(element.innerText.indexOf("No results were found for this query")>=0)
                 element.innerHtml="Custom message here";
            }
    </script>

After adding that script, remember to include </body></html> tags.

Can the text value be read and its strings changed?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having trouble publishing project on Vercel because of a naming issue

Error in vue.js: Unable to call this.$emit as it is not a function

Is it possible to trigger a server-side event using jQuery in SharePoint 2010?

Guide on extracting an Array from JSON in a $.ajax response

Step-by-step Guide to Setting pageProps Property in Next.js Pages

What is the method for setting tabstops in XHTML?

What is the process for sending a post request with a JSON payload to an external API using Node.js?

Creating a dynamic table in AngularJS with rotating values for rows and columns

How can I change an element using jQuery's getElementById method?

Utilizing asynchronous false in Wordpress Ajax functionality

Google Analytics in Next.js Missing Page Title Configuration

Issue on Heroku with Discord.js displaying a "Service Unavailable" message

Dynamic route fails to return value for ID search

Setting specific variables in an array with corresponding key-value pairs

I'm having trouble with my code not working for get, set, and post requests. What could be causing this issue and how can I

Exploring JSON data and making precise adjustments in JavaScript

How to send URL parameters to a different page with the help of express and Node.js

What is the established procedure for resetting all elements within an (X)HTML document?

Setting up paths to bypass authentication on an Express website

These specific resources don't have a cache expiration set. Wondering how to properly set a cache expiration for a JavaScript file