Document.prototype.greenify = function(){
return {
style : function(){
return this.color = "green";
}
}
};
document.getElementsByTagName("H1")[0].greenify();
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>TEST</h1>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Hey out there,
I wanna build a 'dot function'.
My function for trial should 'greenify' my element.
I already tried to add the function to Window- object but I came to the same result.
So, now my question...
What I did wrong or did I forget something?
I'm thankfully for each answer I receive :)
h1 elements don't inherit from Document.prototype. They inherit from those:
HTMLHeadingElement.prototype
HTMLElement.prototype
Element.prototype
Node.prototype
EventTarget.prototype
Object.prototype
For example, you can add the method to HTMLElement.prototype:
HTMLElement.prototype.greenify = function(){
this.style.color = "green";
};
document.getElementsByTagName("H1")[0].greenify();
HTMLElement.prototype.greenify = function(){
this.style.color = "green";
};
document.getElementsByTagName("H1")[0].greenify();
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>TEST</h1>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
However, note that modifying objects you don't own is considered a bad practice.
Related
Does flutter(Dart) have a function similar to js bind?
I wanted to do something similar in flutter.
like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function handlerName(e)
{
alert(e.data.msg);
}
$(document).ready(function(){
$("p").bind("click", {msg: "chicked!"}, handlerName)
});
</script>
</head>
<body>
<p>click me！</p>
</body>
</html>
There is nothing like bind in Dart
but this might do what you want as well:
onReady.listen((e) => handlerName(e, msg: 'clicked'))
my problem is quite minor.
I do not get along with the syntax of JavaScript
What I want to do is actually cause the following code to occur:
with this regex:
^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]).){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
<meta charset="utf-8" />
<title></title>
<script>
$(document).ready(function () {
$("#but").click(check);
});
function check() {
var str = $("#dataCon").val();
var result = str.match(/\d/g);
alert(result);
}
</script>
</head>
<body>
<textarea id="dataCon"></textarea>
<button id="but">Click here</button>
</body>
</html>
I have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>
This is working fine.
But if I try to do the same thing by creating a separate JavaScript function, the code is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick=displayDate()>The time is?</button>
<script>
function displayDate(){
this.innerHTML=Date();
}
</script>
</body>
</html>
What is the reason for this?
Your this isn't refer to the button itself, when it is in the function scope. You can achieve to the desired result with many approaches.
1) You can pass this to the function as a parameter
function displayDate(context){
context.innerHTML = Date();
}
<button onclick="displayDate(this)">The time is?</button>
2) Using explicit bindings, like call or apply
function displayDate(){
this.innerHTML = Date();
}
<button onclick="displayDate.call(this)">The time is?</button>
You can try to do something like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="test" onclick=displayDate()>The time is?</button>
<script>
function displayDate(){
document.getElementById("test").innerHTML=Date();
}
</script>
</body>
</html>
How can I pass argument to function redirect in JavaScript
Here is my code:
<script type="text/javascript">
<!--
function redirectlink(text){
window.location = "index.php?keyName="+ text;
}
//-->
</script>
<form>
<button type="button" id="butt_1" onclick="redirectlink(KEY_POWER)"> 1 </button>
Thank you in advance.
This can be done either by using getElementById and addEventListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo">Click</button>
<script type="text/javascript">
document.getElementById("foo").addEventListener("click", function(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
})
</script>
</body>
</html>
either onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="foo" onclick="action()">Click</button>
<script type="text/javascript">
function action(){
window.location.replace("http://stackoverflow.com/q/36933820/5526354")
}
</script>
</body>
</html>
Using onclick is deprecated.
With just only JavaScript (without jQuery / Angular etc.) you can use addEventListener on click event.
for example:
var btn = document.getElementById('butt_1');
btn.addEventListener('click', function(e) {
// your code
});
In this function you can for example get value/txt from this button element and something else which you want.
hi2all i write code which change the color of webpage when the user click the div
but doesn't work here is my code what's wrong with it
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
<script type="text/javascript">
var x=document.getElementById("m");
x.addEventListener("click",function{
document.body.style.backgroundColor = "red";
});
</script>
</head>
<body >
<div id="m">kfjgflg</div>
</body>
</html>
You should use something such as:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
</head>
<body>
<div id="m">kfjgflg</div>
<script type="text/javascript">
var x=document.getElementById("m");
x.addEventListener("click",function(){
document.body.style.backgroundColor = "red";
});
</script>
</body>
</html>
Because you have two problems in your original code:
Is missing a important () after the token "function".
The Javascript only recognizes a element after the page or element has ready. In this case, the element only is read to be recognized if your code has after the Javascript Codes that recognizes it.
The code above fixes this.
A important observation: In some IE's, this code can not work, because of the use of x.addEventListener, in this case, you can transform the anonymous function in a normal function (with a name) and listen with addEventListener (if available) and onclick (recommended for old IE's).
In this way,the code looks like:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
</head>
<body>
<div id="m">kfjgflg</div>
<script type="text/javascript">
function changeColor(){
document.body.style.backgroundColor = "red";
}
var x=document.getElementById("m");
if(!!x.addEventListener){ //If exists
x.addEventListener("click", changeColor);
}
x.onclick = changeColor; //It's a property, and ALWAYS can be set (but in some cases is not recognized)
</script>
</body>
</html>
Here is a working example with this code: http://jsfiddle.net/fjorgemota/qCXH3/
If you had opened your JavaScript error console it would have told you that you cannot access the property/method addEventListener of undefined.
You need to look for the element m after the DOM tree has been built. Either place into a function which gets called on DOMContentLoaded:
document.addEventListener('DOMContentLoaded', function() {
/* ... */
}, false);
or place your script at the end of your <body>.