I have this code that scans my page looking for divs with a tag "message" but I would like it to give an alert with the number in this tag. Why is it not working?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function updateElement() {
var allDivs=document.getElementsByTagName('div'), i=0,d;
while(d=allDivs[i++]){
if(d.getAttributeNode('message')){
var ID = $(this).attr("message");
alert(ID);
}
}
}
onload=function(){updateElement()}
</script>
<div message="1">2</div>
<div message="2">3</div>
<div message="3">3</div>
this is not what you think it is. Try this:
var ID = $(d).attr("message");
Also, you need to make sure you have included a script reference to JQuery if you want to use it.
Here is a working example with JQuery
If you don't want to use JQuery you can do it without...
while (d = allDivs[i++]) {
var message = d.getAttributeNode('message');
if (message ) {
var ID = message.value;
alert(ID);
}
}
Here is a working example that doesn't use JQuery
Related
I'm trying to use JavaScript to set the value of an Input Text Box to this Emoji >> 🤔
But it didn't work as I expect it to.
I've tried several different format to express the Unicode but none of it works.
I've included the snippet that I've tried.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script>
var myTextBox = document.createElement("input");
document.body.appendChild( myTextBox );
myTextBox.value = "🤔";
// None of below will work:
// \u1F914
// \xF0\x9F\xA4\x94
// 🤔
</script>
<p> 🤔 </p>
</body>
</html>
Any idea on how to do this properly?
You need to convert it into a surrogate pair: "\uD83E\uDD14"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<script>
var myTextBox = document.createElement("input");
document.body.appendChild( myTextBox );
myTextBox.value = "\uD83E\uDD14";
</script>
<p> 🤔 </p>
</body>
</html>
This is the simple code I run hoping to get control over html5 validation but the browser says setCustomvalidity is not a function. what am I doing wrong?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input type='text' id='tocheck' />
<script>
$("#tocheck").click(function () {
var $this = $(this);
$this.setCustomValidity("slkdjf");
});
</script>
</body>
</html>
jQuery does not have the setCustomValidity function, but the actual DOM element does. The jQuery selector always returns an Array, so you can use the zero index to get the actual DOM element or you can just use this (not $(this)) to get the DOM element upon which you can set the custom validity.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<form>
<input type='text' id='tocheck'/>
<button>
Submit
</button>
</form>
<script>
$("#tocheck").click(function(){
this.setCustomValidity("slkdjf");
});
</script>
</body>
try to
$this[0].setCustomValidity("slkdjf");
And html
<form>
<input type="text" id="tocheck">
<button type="submit">Button</button>
</form>
You can simply do this.setCustomValidity("slkdjf"); this is the DOM object, whereas $(this) is the jQuery wrapper around same.
$("#tocheck").click(function(){
this.setCustomValidity("slkdjf");
$( "<p>slkdjf</p>" ).insertAfter( this );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='tocheck'/>
you can use syntax like
$('#id**^**.class')[0].setCustomValidity('**some notification string ...**');
I made a Google site for my internal use.
On this site, one page was not suitable for iPhone so I made it in HTML and JavaScript.
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript" src="./isIphone.js"></script>
<title>Check iPhone</title>
<meta charset="utf-8" />
</head>
<body onload="isIphone()"></body>
</html>
and JavaScript code as below:
function isIphone() {
var osVer = "iPhone";
if (navigator.userAgent.indexOf(osVer) > 0) {
var childWindow =
window.open('https://calendar.google.com/calendar/');
}
else {
var childWindow = window.open('https://xxxxxxx/calendar/main');
}
}
Above code worked fine until last week, but from yesterday it does not anymore and produce error code 502.
test.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script>
var eles = document.getElementsByClassName('review');
console.log(eles);
console.log(eles.length);
console.log(eles[0]);
// for(var i=0, max=eles.length)
</script>
</head>
<body>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
</body>
I checked eles represents HTMLCollenction.
Here says HTMLCollection also exposes its members directly as properties by both name and index.
So I tried to debug by console.log(eles.length) and console.log(eles[0]).
But unfortunately console shows 0 and undefined.(using Google Chrome Tool Developer)
How can I access the result of eles?
I want to change style and add attribute to the tags gotten by ClassName.
Plus, I can only use natural Javascript.
The problem is you have placed the script in the header which gets executed before the html elements are loaded, so getElementsByClassName() will not return any elements.
One solution is to wait for the html elements to be loaded then execute your script, for that you can use the window objects load event
window.addEventListener('load', function () {
var eles = document.getElementsByClassName('review');
console.log(eles);
console.log(eles.length);
console.log(eles[0]);
})
Or you can place your script at the bottom of the body element instead of in head so that by the time the script is parsed and executed the elements are loaded in the dom
Your html elements dont exist when you run the code. you code is processed, at that poiint your body tag doesnt exist. so:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<script>
var eles = document.getElementsByClassName('review');
console.log(eles);
console.log(eles.length);
console.log(eles[0]);
</script>
</body>
Works fine because you've ran your code after your html elements have been added.
Best practices are that you generally have your javascript right at the end of your body tag.
(Or another technique is using a 'ready' script, like document.load or $(function(){)
Use below code for access 0 position element:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
<div class="review"></div>
</body>
<script>
var eles = document.getElementsByClassName('review');
console.log(eles);
console.log(eles.length);
console.log(eles[0]);
// for(var i=0, max=eles.length)
</script>
</html>
I have a checkbox and a text input. I want that the text input is only enabled if the checkbox is checked. I found an answer to this problem here, but the following code did not work:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
<script type="text/javascript">
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
</script>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
</body>
</html>
However, I noticed that the code works if I move the < script > environment below the < input > boxes like that
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
<script type="text/javascript">
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
</script>
</body>
</html>
Why does the position of the < script > environment play a role for the onchange attribute?
That's because the page is parsed from the top, and each element is added as soon as it is parsed.
When the script tag has been parsed the code will run right away. At that time the input tags hasn't been parsed, so the input elements doesn't exist yet.
By placing the script tag below the input tags, the script runs after the input elements has been created.
Instead of rearranging the code, you can use the onload event to make sure that the code runs after the page is completely parsed:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>title</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById('yourBox').onchange = function() {
document.getElementById('yourText').disabled = !this.checked;
};
};
</script>
</head>
<body>
<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />
</body>
</html>