Writing Text to a Region Using JavaScript in Oracle Apex

Writing Text to a Region Using JavaScript in Oracle Apex

This example shows you, how to writing text to a region using JavaScript in Oracle Apex. I will use document.getElementById().innerHTML JavaScript command to perform this task. Follow these steps:

1. Create a Region and set the following properties:

In Oracle Apex page designer, do the right-click on the Region node and select Create Region option to create a new region and then set the following properties:

  • Title: JS Text
  • Type: Static Content
  • Template: Blank with Attributes
  • Static ID: jstext

2. Write Text to the above Region Using JavaScript on Page Load

Click on your page in page designer, then in properties go to JavaScript > Executes when Page Loads and add the following JavaScript code:

document.getElementById("jstext").innerHTML="This is the <b>first line</b> of text written through JavaScript.<br>";

You can also execute the above JavaScript code using a dynamic action for page load.

Now we will see, how you can add more text in the same region using a button or other dynamic actions executing JavaScript code. For the below example, I created a button and created a dynamic action for the button to execute JavaScript code.

3. Append More Text to a Region in Oracle Apex Using JavaScript

Add the following JavaScript code to any event to append text to the above-created region:

document.getElementById("jstext").innerHTML += "This is the <b>Second line</b> of text written through JavaScript.<br>";

Here we are using the "+=" operator to append text. Similarly, you can add more text to it using JavaScript in any event. The following is the output:

Output

Oracle Apex - write text using JavaScript into a region.

Related tutorials:

 

This Post Has 3 Comments

  1. jimmy chen

    Sorry, could you teach me how to control the word , First line , second line ,third line

    1. Vinish Kapoor

      You can simply change the text or you can use the page items. For example:

      document.getElementById("jstext").innerHTML += $v("P1_YOURITEM");
      
    2. jimmy chen

      sincerely thks for your answer , i got it

Comments are closed.