Freelance Project Requests info@CodeDocu.de Software Development in C# WPF Asp.Net Core Vba Excel Word SQL-Server EF Linq, UWP Net
#

 

 

 

Task:

how can you add an event to all elements of a given HTML tag?

 

Description:

HTML, Javascript

The following example shows how to attach all P-Html elements in a Div container element with a click-event Listener.

As a result, all html elements with the tag name: P react to the mouse click

 

 

HTML Javascript Sample, code snippet

<button type="button" title="optimize" onclick="set_Event_on_Children();">Test</button>

@*------------< script: Image-Tools >------------*@

<script>

    //----< events >----

    function set_Event_on_Children() {

        //----< set_Event_on_Children() >----

        //*sets an event to all children with match type

 

        var div = document.getElementById("ctlEditor_HTML");

        var elements = div.getElementsByTagName("p");

 

        //< loop: children >

        for (var i = 0; i < elements.length; i++) {

            //< attach event >

            elements[i].addEventListener("click", test);

            //</ attach event >

        }

        //</ loop: children >

        //----</ set_Event_on_Children() >----

    }

 

    function test() {

        //< Test >

        alert("Test");

        //</ Test >

    }

 

</script>

@*------------</ script: Image-Tools >------------*@

 

 

Javascript code optimization

 

The upper javascript function can then be improved by using parameters

 

<button type="button" title="optimize" onclick="add_Events_in_Editor();">Test</button>

@*------------< script: Image-Tools >------------*@

<script>

    //----< events >----

    function add_Events_in_Editor() {

        set_Event_on_Children("ctlEditor_HTML", "p", "click");

    }

   

 

    function set_Event_on_Children(sElementID,sChildren_Tagname,sEventname) {

        //----< set_Event_on_Children() >----

        //*sets an event to all children with match type

 

        var div = document.getElementById(sElementID);

        var elements = div.getElementsByTagName(sChildren_Tagname);

 

        //< loop: children >

        for (var i = 0; i < elements.length; i++) {

            //< attach event >

            elements[i].addEventListener(sEventname, test);

            //</ attach event >

        }

        //</ loop: children >

        //----</ set_Event_on_Children() >----

    }

 

    function test() {

        //< Test >

        alert("Test");

        //</ Test >

    }

 

</script>

@*------------</ script: Image-Tools >------------*@

 

 

 

 

 

Mobile
»
HTML: Move the position of an element only up to a certain position
»
Javascript: attach event to all children
»
Asp: Display image refreshed despite browser cache
»
Show Emoticons as Black and White Graphics
»
jQuery Example: Convert text to number, swap image
»
How can I copy something to the clipboard with a button from a web page?
»
Javascript: how to get the URL of the current website
»
Javascript: Query dialog OK Cancel
»
Bilder automatisch in der Größe anpassen mit CSS
»
Javascript: change style in javascript

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de