Javascript Course

Here is a simple JavaScript function that can be used to move a html element to a random direction in page.

click on the code to select it.
//sets a random absolute position to a html element; receives the html element
function moveElmRand(elm){
 elm.style.position ='absolute';
 elm.style.top = Math.floor(Math.random()*90+5)+'%';
 elm.style.left = Math.floor(Math.random()*90+5)+'%';
}

Funny example with auto-moving a button

- In the following example the moveElmRand() function is called when the mouse is over the button.
<h4>Example auto-moving html element</h4>
<p>Try to click on the following button.</p>

<button id='btn_test'>Catch Me</button>
<script>
//sets a random absolute position to a html element; receives the html element
function moveElmRand(elm){
 elm.style.position ='absolute';
 elm.style.top = Math.floor(Math.random()*90+5)+'%';
 elm.style.left = Math.floor(Math.random()*90+5)+'%';
}

//get the #btn_test
var btn_test = document.querySelector('#btn_test');

//register to call moveElmRand() on mouseenter event to #btn_test
btn_test.addEventListener('mouseenter', function(e){ moveElmRand(e.target);});

//register click to #btn_test
btn_test.addEventListener('click', function(e){ alert('You are Good.');});
</script>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag adds a new line into a paragraph?
<b> <br> <p>
First line ...<br>
Other line...
Which CSS property can be used to add space between letters?
text-size word-spacing letter-spacing
#id {
  letter-spacing: 2px;
}
What JavaScript function can be used to get access to HTML element with a specified ID?
getElementById() getElementsByTagName() createElement()
var elm = document.getElementById("theID");
var content = elm.innerHTML;
alert(content);
Click on the "echo" correct instruction.
echo "CoursesWeb.net" echo "CoursesWeb.net"; echo ""CoursesWeb.net";
echo "Address URL: http://CoursesWeb.net";
Moving html element to a random direction

Last accessed pages

  1. Add sounds and audio effects in Flash (3492)
  2. Detect when ScrollBar reaches the bottom of the page (4384)
  3. JQZoom Image Magnifier (12996)
  4. Simple arithmetic calculator in PHP (2104)
  5. querySelector and querySelectorAll (30064)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (326)
  2. PHP Unzipper - Extract Zip, Rar Archives (86)
  3. Read Excel file data in PHP - PhpExcelReader (82)
  4. The Mastery of Love (78)
  5. PHP-MySQL free course, online tutorials PHP MySQL code (65)