The ID is an attribute that can be added to HTML tags. The value added at this attribute assigns an unique ID for that HTML tag. The "id" can be used to define CSS styles, but can also be used in JavaScript scripts to work with HTML elements and their content. Thus, the id can make a connection between JavaScript and HTML tags.
To reference in a JS script to a HTML tag through its ID, use the following syntax:

document.getElementById('id')
- returns a reference to the whole HTML element that has thad "id ".

The object returned by getElementById() contains properties and methods to can work with the component parts of that element (attributes, content). See the list from the page:
coursesweb.net/javascript/properties-methods-html-elements


- Below are examples with some of these properties and methods that you can test directly on this site.


addEventListener()

addEventListener() is a method used to detect events on HTML elements (click, mouseenter, focus, input, etc.).
Syntax:

elm.addEventListener('event', callF)
- 'elm' represents the HTML element. When the 'event' is triggered on that element, it calls the function from callF.

More details in the tutorial from: coursesweb.net/javascript/register-detect-event-handlers

- Here's an example. When the mouse is over a Div, it changes its background color; the click on that Div it displays an alert window.
<h4>Example with addEventListener()</h4>
<p id='pr1'>If you place to mouse over the Div, it changes its background; if you click on it, will display an alert.</p>
<div id='dv1' style='background:#b8eeb9; height:100px; font-weight:700; width:150px;'>Div #dv1<br>
 - Click Here -</div>

<script>
var dv1 = document.getElementById('dv1');

//detect mouseenter
dv1.addEventListener('mouseenter', (ev)=>{
 // ev.target represents the element that triggered the event
 ev.target.style.background ='#ced0fe';
});

//detect click
dv1.addEventListener('click', (ev)=>{
 alert('Peace is Good');
});
</script>

innerHTML

Returns or replaces the HTML content of an element.

<h4>Example innerHTML</h4>
<a id='lnk1' href='//coursesweb.net' title='coursesweb.net'><em>coursesweb.net</em></a>
<ul><li><a href='//gamv.eu' title='GamV.eu'>GamV.eu</a></li></ul>
<p>If you click on the following button, it gets the content of the first link (with id 'lnk1'), then replaces it with another content and shows the initial content in console.</p>
<button id='btn1'>Test innerHTML</button>
</div>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk1 = document.getElementById('lnk1');

 //get html content in #lnk1
 var cnt = lnk1.innerHTML;

 //replaces the content of lnk1
 lnk1.innerHTML ='Content added with <em>innerHTML</em>';

 //shows in console the original content
 console.log('The initial content in #lnk1: '+ cnt);
});
</script>

getAttribute(attr) and setAttribute(attr, val)

getAttribute(attr) returns the value of the specified attribute, 'attr'.
setAttribute(attr, val) sets the specified 'attr' attribute with the value 'val'.

<h4>Example getAttribute() and setAttribute()</h4>
<p id='pr1' style='background:#fbfbbb; font-size:18px;'>If you click on the following button, it displays the value of the 'style' attribute of this paragraph (with getAttribute() ), then sets another value for 'style', with setAttribute().</p>
<button id='btn1'>Set style</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var prg = document.getElementById('pr1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').textContent ='previous style: '+ prg.getAttribute('style');
 prg.setAttribute('style', 'background:#dee0fe; font-weight:700;');
});
</script>

parentNode

Returns the parent element.

<h4>Example parentNode</h4>
<div>
<p>If you click on the following button, it displays the tag name of its parent (with tagName).</p>
<button id='btn1'>Parent Tag</button>
</div>
<blockquote id='resp'>#resp</blockquote>

<script>
var btn = document.getElementById('btn1');
btn.addEventListener('click', (ev)=>{
 document.getElementById('resp').textContent = btn.parentNode.tagName;
});
</script>

The style property

With the style property you can set CSS properties to HTML elements, using this syntax.

elm.style.propName ='value';
- 'elm' represents the HTML element, 'propName' is the CSS property, and 'value' is the assigned value.

The difference appears when are used composed CSS properties, like "font-weight", "margin-top" or "border-top-width", ...
In JavaScript disappears the dash '-' character and the next words are written with uppercase first character, so for "font-size" from CSS in JS is "fontSize", and "border-top-width" in JS is "borderTopWidth".

<h4>Example with style property</h4>
<p id='pr1'>When you cick on the following button, it will define to this paragraph the 'color' and 'font-size' CSS properties using the JS 'style'.</p>
<button id='btn1'>Set style</button>

<script>
var prg = document.getElementById('pr1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 prg.style.color ='#0000d0';
 prg.style.fontSize ='20px';
});
</script>

value

The value property sets or returns the value of the 'value' attribute.
- To can use the "value" property with getElementById('id'), the form field must have an "id".
Here's a simple example, when you click a button, it displays the text written in a 'password' field.

<h4>Example with value</h4>
<p id='pr1'>When you cick on the following button, it will display the value /text added in 'password' field.</p>
Password: <input type='password' id='inp1' value='passweb.net'><br>
<button id='btn1'>Show pass</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var inp = document.getElementById('inp1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').textContent = inp.value;
});
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which attribute indicates that an input field must be filled out before submitting?
required="required" autofocus="autofocus" placeholder="text"
<input type="text" name="name1" required="required" />
Which CSS method increases or decreases the size of the HTML element (including its content)?
translate() scale() skew()
#some_id:hover {
  transform: scale(2, 1.5);
  -ms-transform: scale(2, 1.5);    /* IE 9 */
  -moz-transform: scale(2, 1.5);   /* Firefox */
}
Click on the Date object method that returns the day of the month.
setDate() getMonth() getDate()
var rightnow = new Date();
var day = rightnow.getDate();
alert(day);
Which function is used to upload a file on server?
is_file() move_uploaded_file() fopen()
if(move_uploaded_file($_FILES["field_name"]["tmp_name"], "dir/file_name")) {
  echo "The file succesfully uploaded";
}
Working with getElementById

Last accessed pages

  1. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (12024)
  2. Read Excel file data in PHP - PhpExcelReader (61000)
  3. JQZoom Image Magnifier (9941)
  4. JavaScript code and PHP (21542)
  5. Polygons with CSS (6773)

Popular pages this month

  1. Insert, Select and Update NULL value in MySQL (417)
  2. Read Excel file data in PHP - PhpExcelReader (332)
  3. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (260)
  4. PHP getElementById and getElementsByTagName (210)
  5. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (199)