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

Guide to switching between 3 classes with mouseover using JavaScript

Currently, I am dealing with an unordered list that contains 4 items. The goal is to have the list grow to 100% of its width when hovered over, while all 'noun hovered li' items should shrink to a width of 0%. Once the cursor leaves, everything s ...

Errors are not displayed or validated when a FormControl is disabled in Angular 4

My FormControl is connected to an input element. <input matInput [formControl]="nameControl"> This setup looks like the following during initialization: this.nameControl = new FormControl({value: initValue, disabled: true}, [Validators.required, U ...

What is the process for installing the jQuery time ago plugin?

I'm having trouble getting the jquery time ago plugin to function properly. Below is the code I am using: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="j ...

Transform all the characters within p tags using the JavaScript replace method

Currently, I am dealing with data displayed on my website that comes from an XML feed. However, the issue lies in the fact that the owner of the XML feed has used grave accents (`) instead of apostrophes ('). To address this problem, I have implement ...

Can Vue.js be configured to reload specific components only?

Can a specific component be reloaded in a Vue component that contains multiple components? For example, if there is a component structured like this: Main component <template> <button>Button<button> <component1></component> ...

Submitting a Yii 2 form automatically when it loads

Pjax::begin(); $form = ActiveForm::begin(); echo $form->field($model, 'testdata', [ 'inputOptions' => [ 'class' => 'form-control input-xsmall input-inline' ], ...

What methods can be used to send JSON data in the body of an express router.get request?

I am currently working on setting up an express endpoint to fetch data from an API and return the JSON response in the body. We are receiving JSON data from a rest API as an array and my goal is to utilize express router.get to present this formatted JSON ...

Guide on seamlessly adding NPM "dependencies" to index.html using <script> tags in a VUE JS WEBPACK project

Are there any tools available that automatically inject or include NPM dependencies into the index.html file, similar to the GRUNT-BOWER plugin for BOWER dependencies? The project in question is a VUE-CLI WEBPACK project. Can this functionality be achieve ...

Highlighting table column when input is selected

I am working with a table where each <td> contains an <input>. My goal is to apply the class .highlighted to all the column <td>s when an <input> is being focused on. Additionally, I want to remove this class from all other columns ...

What is the best way to fetch d3 data from a service?

I've been exploring a tutorial on creating charts with d3, which can be found at: When it comes to loading data for use in d3, I typically rely on the following code snippet: d3.tsv("data.tsv", type, function(error, data) { The file "data.tsv" is c ...

The module 'iap_verifier' could not be located

Setting up a new server using the following repository - https://github.com/surespot/web-server. I have successfully installed node.js, npm, CoffeScript, and all required dependencies. apt-get install nodejs npm npm install -g <a href="/cdn-cgi/l/email ...

What are the potential ways in which an html IMG tag can disrupt the functionality of this

For years, I have been using this form code without any issues. The code functions perfectly and all the tags are correct. However, whenever I include an image tag, it displays a failure message and prevents the mail function in PHP from working. The hea ...

What causes Angular2 to detect both reference changes and primitive changes even when the OnPush flag is enabled?

Take a look at this code snippet import {Component, OnInit, Input, OnChanges, DoCheck, ChangeDetectionStrategy} from 'angular2/core' @Component({ selector: 'child1', template: ` <div>reference change for entire object: { ...

Show User-Specific Information Using DataTable

After conducting extensive research, I have been unable to find a suitable example to reference. My goal is to customize my DataTable so that it only displays data relevant to the currently logged-in user (admin accounts will have access to all data). I am ...

Bootstrap Model Footer Button Alignment

click hereI'm facing an issue while adding buttons to the model footer. The buttons are not aligning in line, instead they move to the next line. <div class="modal-footer"> <form method="post" action="admin_view"> ...

Utilize PHP to transform various forms of smart quotes

I have been working on a function to convert all types of smart quotes to regular quotes within text. However, the function I have put together still appears to be lacking proper support and design. How can I successfully convert all quote characters? fun ...

Importing models in SceneJS does not function properly with Internet Explorer

I've been exploring different webGL frameworks lately. While I like SceneJS, I've noticed some compatibility issues with Internet Explorer. For instance, in IE 11, importing OBJ files seems to cause the online examples to freeze up: Check out th ...

Cursor starts to move to the front of the input line after every single letter with a 1 millisecond delay while browsing certain websites, such as the comments section on Youtube

When I type a letter in the field, within 1 millisecond the cursor jumps to the beginning of the line in the typing field, causing text to be typed in reverse. I can only send messages on certain sites, such as YouTube comments and Yandex Translate, for ex ...

How to implement a for loop within a Vue.js method

Within Vuejs, I have a method that updates multiple variables based on user selection. methods: { updateChart(){ this.chart1.series[1].data = [this.$store.state.selectedcities[0].value[1]]; this.chart1.series[2].data = [this.$store.state.selecte ...

Submitted input in a text field is automatically displayed in a separate text box

Below is a snippet of HTML code from my AngularJS application <input type="text" class="input-xlarge" id="user_name" ng-model="myModel.text" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-titl ...