Creating a javascript function to update content on click

Recently, I've been designing a webpage and encountered an issue. I want the text in a specific area to change whenever a user clicks on a link. Below is the code snippet related to the section I want to modify using a JavaScript function.

<div id="banner_left">

   <h2 id="tagmain">This section contains a title that needs to be updated</h2>
   <p id="tagtext">The main body of text that should change dynamically upon clicking a link.</p>
   <div class="cleaner_h20"></div>
   <div class="button_01"><a href="#">More</a></div>

</div>

The following code relates to the link:

<div class="banner_button">
   <a id="support" href="#" onclick="javascript:changeText(args)>Support</a>
</div>

And here's the script for the function:

<script language="javascript" type="text/javascript">
  function changeText(idElement) {
    if(idElement==1){
     document.getElementById.('tagmain').innerHTML ='New title to display';
     document.getElementById.('tagtext').innerHTML ='New text to display.';}
    return false;
 }</script>

I plan to add more conditions to the function to refine its behavior. However, being more familiar with Java than Javascript, I seem to have made an error. Any assistance would be greatly appreciated. My goal is to update the content within the site's body instead of navigating to a new page when a user selects the CSS "button"/link for support. Currently, the function doesn't seem to respond at all. Thank you in advance. Here's hoping it's just a simple fix :)

Answer №1

Avoid using a period after getElementById

<script language="javascript" type="text/javascript">
 function changeText(idElement) {
    if(idElement==1){
        document.getElementById('tagmain').innerHTML ='New title to display';
        document.getElementById('tagtext').innerHTML ='New text to display.'; // corrected syntax
        return false;
    }
 }
 </script>

Modify in HTML code

<div class="banner_button">
   <a id="support" href="#" onclick="javascript:changeText(1); return false;">Support</a>
</div>

Alternatively, you may utilize jQuery for html manipulation

<script language="javascript" type="text/javascript">
 function changeText(idElement) {
    if(idElement==1){
        $('#tagmain').html('New title to display');
        $('#tagtext').html('New text to display.');
        return false;
    }
 }
 </script>

Answer №2

<a id="help" href="#" onclick="javascript:modifyText(content)">Help</a>

... and it appears that a quotation mark is absent, I presume.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular Group Formation Issue

I keep encountering the following error: formGroup expects a FormGroup instance. Please pass one in. This is how it looks in HTML: <mat-step [stepControl]="firstFormGroup"> <form [formGroup]="firstFormGroup"> And in my Typ ...

Creating a nested array of objects using a recursive function

How can I utilize my getChildren() function to create a larger function that takes my two main arrays objs and objRefs, and generates a single array of objs showcasing their parent/child relationship? Below are the two primary data arrays: const objs = [ ...

Newcomers: Introduction to PHP password security

As someone who is new to PHP password hashing and coding, I recently created a simple login form that requires a username and password. After successfully submitting the form, the password is stored in a database by using $_POST['password']. Howe ...

Enhancing JavaScript form validation techniques

I am currently working on a user profile form that includes 15 text fields, dropdown menus, and a textarea. Users can input information into these fields, and upon saving the form, not all fields are required to be filled out. However, I need to validate a ...

Adjust the dropdown selection according to the entered text

I am looking to dynamically change a select option based on the value entered in a text input field. For instance, when I type "mydomain.com," this is what should happen: I type "mydomain" I type "." (dot) The input stops accepting characters The script ...

Creating a custom Vue.js component for specific table cells within a table row - here's how!

My challenge is having related and neighboring table columns grouped within the same component in Vue.js. However, I'm facing a limitation with the template system where only one tag can be directly placed inside <template>. Typically, this wrap ...

Gulp halts when watching code and reloads upon any changes made

Hey there, I'm new to GULP and could use some help... I've been trying to configure GULP for a template that uses AngularJS. When I run the gulp command, the console displays the message "**Done Waching code and reloading on changes" but nothing ...

A variable must be defined within a specific block in order to be recognized

In an effort to enhance my code within a passport function, I am looking to pull values from a mongodb Database rather than from an array. The initial functioning code appeared as follows: passport.use( new LocalStrategy( { usernameField: ...

Issue with kendo grid not properly saving recently added data

Unexpected Grid Behavior: Adding a new record Pressing the update button in the grid for the newly added row Cancelling before saving After completing the above actions, the newly added row disappears. View js fiddle example <!DOCTYPE html> <h ...

Having multiple HTML select elements and utilizing jQuery AJAX

I am looking to implement a dynamic multiple select using AJAX and jQuery. The first select (c1) is functioning correctly. When I click on it, it triggers the appearance of another select (c2). Similarly, clicking on the second select (c2) should lead to ...

How to align several lines of text in a table cell

I've been trying to center multiple lines of text in a table cell using the table method, but no matter how many online guides and SO posts I follow, I just can't seem to get it right. What I'm aiming for is to have the text perfectly cente ...

Is it possible to detect inline elements that have been wrapped?

I am facing a challenge with displaying an indefinite amount of in-line elements. Depending on the width of the browser, some elements may shift to a new line. I am curious to know if it is possible to identify and isolate these rows of elements, or if the ...

What is the reason behind appending a timestamp to the URL of a JavaScript resource?

$script.ready('jui',function() { $script('<?php base_path(); ?>js/partnerScripts.js?ts=1315442861','partners'); }); Can anyone explain why there is a fixed ts=timestamp at the end of the partnerScripts.js file name? I ...

What could be preventing my XPath from selecting a link/button using its label text?

<a href="javascript:void(0)" title="home"> <span class="menu_icon">Possibly more content could go here</span> Home </a> When I use //a as the XPath in the above code, it is highlighted. However, when I try //a[contains(text ...

Display the returned view following an AJAX request

Currently, I am trying to search for a specific date in the database using ajax to trigger the function. However, I am encountering a 404 error when I should be receiving the desired outcome, and the ajax call is entering an error mode. Here is the snippet ...

How to programmatically close a colorbox using an ASP.NET form's Submit button within an iframe

I've looked at other similar questions, but I just can't seem to make this work. I want to close the colorbox iframe when a .NET Button form within the iframe is clicked. <script type="text/javascript"> $(document).ready(function() { ...

Implementing Browser Back or Back button in AngularJS

Currently, I am developing an application that utilizes route methods to navigate between webpages for different modules. Essentially, it is a single page application with route methods responsible for loading the HTML content in the body section. The iss ...

"An error occurred while trying to retrieve memory usage information in Node.js: EN

Is there a way to successfully run the following command in test.js? console.log(process.memoryUsage()) When running node test.js on my localhost, everything runs smoothly. However, when attempting to do the same on my server, I encounter this error: ...

Tips for incorporating an additional dataset bar using chart.js

I'm having a bit of trouble trying to modify the following script. Currently, it only displays one bar per label, but I need it to show 2 bars per label. Despite my numerous attempts using different variations with and without commas and "{}", I can&a ...

Styling the footer to sit at the bottom of the page with a wider width, overlapping the content

I've encountered an issue where the footer of my webpage overlaps the content when the main content is long and users cannot scroll properly. Additionally, I've noticed that the width of the footer is larger than the header of the website. Below ...