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 renders as emphasized text, displaying the text oblique?
<strong> <pre> <em>
<p>Web development courses: <em>CoursesWeb.net</em></p>
Which CSS property defines the space between the element border and its content?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Click on the method which returns the first element that matches a specified group of selectors.
getElementsByName() querySelector() querySelectorAll()
// gets first Div with class="cls", and shows its content
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicate the PHP variable that contains data from a form sent with method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Moving html element to a random direction

Last accessed pages

  1. innerHTML and outerHTML to Get and Replace HTML content (25104)
  2. Display data from PHP Array, or MySQL in HTML table (19265)
  3. JavaScript code and PHP (29595)
  4. Inheritance - Parent class and Child class (2978)
  5. Insert, Select and Update NULL value in MySQL (52049)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (445)
  2. Register and show online users and visitors (324)
  3. PHP-MySQL free course, online tutorials PHP MySQL code (243)
  4. JavaScript Course - Free lessons (237)
  5. querySelector and querySelectorAll (223)