CODEWITHSUNDEEP
javascripthtmlfunction
user2265229
user2265229

Reputation: 151

how to add javascript function to html tag?

Just curious, and want to know. Can I add a javascript function to certain html tag? In example, if I have div tag like this:

<div id="example">Hello!</div>

and want to add function that alert the value inside of every div like:

function divFunction(){
     alert(/*some div content*/);
}

so, it can be executed like:

<div id="example">Hello!</div>
<script>
     document.getElementById("example").divFunction();
</script>

The point of my question is to add some new attribute or function to a certain tags. Like if there is:

document.getElementById("example").innerHTML;

can it be: 

document.getElementById("example").newAttribute;

What makes me curious because jQuery can done something like this:

$( "#result" ).load( "ajax/test.html" );

Upvotes: 8

Views: 35445

Answers (7)

Jose V
Jose V

Reputation: 1854

you can do this with custom-elements [1] [2]

  1. create custom-element
  2. add method to custom-element class
  3. you can call the method
export class CustomElementInput extends HTMLElement {

  log(){
    alert("log")
  }

  // you can even overwrite methods like so
  remove(){
    alert("removing this node")
    super.remove()
  }
}

customElements.define("custom-element-input", CustomElementInput)

// somewhere else...
// in your HTML something like:
// <custom-element-input></custom-element-input> 

const el = document.querySelector("custom-element-input")
el.log() // creates alert()

:)

Upvotes: 0

Daniele Licitra
Daniele Licitra

Reputation: 1608

It's possible without the use of any library.

I use it to validate the content of a modal element saved in another file

This is myModal.html

<div id="myModal"... >
  some content
</div>

<script type="module">
  document.getElementById("myModal").validate = function() {
    console.log("validating");
    //some controls and DOM manipulations
    return true;
  };
</script>

In the other file mainPage (it could be a .cshtml or a .php page) i'm including myModal.html.

I can access the function because it's a div's function:

This is MainPage. :

<script type="module">
   let theModal = document.getElementById("myModal");
   let isValid = theModal.validate();
</script>

In this way the function is "portable" with the div and it's in the same file (no more copy and paste)

Upvotes: 0

Spiderpoison
Spiderpoison

Reputation: 175

It's a little weird and inadvisable, but it's possible.

tag=document.querySelector('#myTag')
tag.test=tag=>{tag.innerText=tag.id};
tag.test(tag);
<html>
<body>
<div id="myTag"></div>
</body>
</html>

Upvotes: 1

Maverick
Maverick

Reputation: 886

This isn't possible because $ (jQuery) and document are defined objects that have there in built functions.

Because when you use . you call an object member.

Foo.bar() - Calling function bar() defined inside and object Foo.

So you would have to make your class/selector.

Here is a simple example:

class select {
	constructor(selector) {
  	this._element = document.getElementById(selector);
  }
  
  // Functions
  
  colorMe() {
  	this._element.style.backgroundColor = "red";
  }

  moveMe(x) {
    this._element.style.marginTop = x;
  }
}

var elem = new select("example");

elem.colorMe();
elem.moveMe("50px");
<div id="example">
  This is an example
</div>

Upvotes: 4

cyr_x
cyr_x

Reputation: 14257

DOM elements are like javascript objects with certain properties, so you could add a new property to, in your case a new function.

Here's an example:

var element = document.querySelector('#example');

function bindToNode(node, name, fn) {
  node[name] = fn.bind(node);
}

bindToNode(element, 'logValue', function() {
  console.log(this.textContent);
});

element.logValue();
<div id="example">
  Hello!
</div>

But you shouldn't mess arround with DOM elements, a better way would be to wrap the elements like jQuery does.

Upvotes: 7

Will Reese
Will Reese

Reputation: 2841

You should pass the html element to your javascript function. Add an element argument in your function definition.

function divFunction(el){
     alert(el.innerHTML);
}

And use getElementById to reference the element to use as an argument.

<div id="example">Hello!</div>
<script>
     divFunction(document.getElementById("example"));
</script>

Upvotes: 0

itodd
itodd

Reputation: 2373

You can add events to the DOM elements. Read this page https://www.w3schools.com/js/js_htmldom_events.asp for more information or see a small example below

function divFunction(){
     alert(document.getElementById("example").innerText);
}
<div id="example" onclick="divFunction()">Hello!</div>

Upvotes: 0

Related Questions