This is the example page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<div id="outerDiv"><div id="innerDiv"><input type="checkbox"></div></div>
<button type="button">Delete</button>
<script>
var inner = document.getElementById('innerDiv');
console.log(inner);
document.querySelector('button').addEventListener('click', function() {
document.getElementById('outerDiv').innerHTML = 'hello world';
console.log(inner);
});
</script>
</body>
</html>
when click the Delete button, outerDiv will change innerHTML, then console the inner value
in chrome
<div id="innerDiv"><input type="checkbox"></div>
but in ie
<div id="innerDiv"></div>
so the variable inner value are different in chrome/ie
It seems that ie browser will remove innerDiv content but not in chrome
Related
I wrote javascript codes.
By clicking the button, the child window pops up and displays a text sent from the parent window using a postMessage function.
My code could sent a text to the child window, but there's no text displayed.
The text is displayed only when I keep clicking the button. I don't want the text to disappear.
I think my code is overridden by a blank script or something, though I don't write any other codes except for below.
Do you have any solution for this?
the parent window html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Parent Window</title>
</head>
<body>
<input type="button" value="TEST_BUTTON" id="testButton">
<script>
var testButton = document.getElementById('testButton');
testButton.addEventListener('click', function(event) {
event.preventDefault();
var newWindow = window.open('./child_window.html', 'popupWindow', 'width=400,height=300');
newWindow.postMessage('this is a content from the parent window.', '*');
return false;
},false);
</script>
</body>
</html>
the child window html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Pop Up Window</title>
</head>
<body>
<h1 id="mainText"></h1>
<script type="text/javascript">
var mainText = document.getElementById('mainText');
window.addEventListener('message', function(event) {
console.log(event.data);
this.mainText.innerText = event.data;
}, false)
</script>
</body>
</html>
I ended this up using localStorage instead.
When I click The button it does not show me any output on the console window
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
<script type="text/javascript" src="script.js">
</body>
</html>
->js
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('Click',showNo);
function showNo() {
console.log('I was Clicked');
}
You have a few issues with your code.
Firstly you need to close your <script> tag in your HTML:
<script type="text/javascript" src="script.js"></script>
Secondly, your id shouldn't have spaces in it. You can change it to something like btn-click:
<button type="button" id="btn-click">Click me</button>
And then make sure to target it properly in your Javascript:
var printNumber=document.getElementById('btn-click');
Thirdly, your event name should be lowercase (as Javascript is case-sensitive), so change "Click" to "click"
Lastly, you want to add the click event listener to your button, which is stored in the variable printNumber. At the moment you are adding the event listener to your document and not the button. To add it to your button you can use:
printNumber.addEventListener("click", showNo); // add click event listener to button
See working example below:
var printNumber = document.getElementById('btn-click'); // change id selector
printNumber.addEventListener('click', showNo); // change 'Click' to 'click'
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title>Awesome button</title>
</head>
<body>
<button type="button" id="btn-click">Click me</button> <!-- change id -->
<script type="text/javascript" src="script.js"></script> <!-- close script -->
</body>
</html>
It should be click not Click!
JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.
var printNumber=document.getElementById('Click me');
printNumber=document.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click me">Click me</button>
</body>
</html>
You had one typo Click which is supposed to be click.
`printNumber=document.addEventListener('Click',showNo);`
^^^^^^^^
you should add event listener to that particular element not to the complete document.
var printNumber=document.getElementById('Click_me');
printNumber.addEventListener('click',showNo);
function showNo() {
console.log('I was Clicked');
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button type="button" id="Click_me">Click me</button>
</body>
</html>
I don't know why the code got no error but isn't displaying the message in JavaScript in the mood function ! It's only displaying the div.
function mood() {
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
<div onload="mood()" style="display: block" id="t">HEYYYYY</div>
Add the onload in body instead of div
<!DOCTYPE html>
<html>
<head>
<title>MA page web</title>
<script>
function mood(){
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
</script>
</head>
<body onload="mood()">
<div style="display: block" id="t">HEYYYYY</div>
</body>
</html>
var box = document.getElementById('t');
function mood() {
box.innerHTML = "Hey <strong>Thanks!</strong>";
}
window.addEventListener('load', mood)
<!DOCTYPE html>
<html>
<head>
<title>MA page web</title>
<script>
</script>
</head>
<body>
<divstyle="display: block" id="t">HEYYYYY</div>
</body>
</html>
You can use an event listener. This waits until the window is loaded and then runs the function. I hope this helps :)
The onload attribute is only supported on the following HTML tags: <body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>.
I've adjusted your example below, moving the onload attribute to the body tag in this instance.
function mood() {
var box = document.getElementById('t');
document.getElementById('t').innerHTML = "Hey <strong>Thanks!</strong>";
}
<body onload="mood()">
<div id="t" style="display: block">HEYYYYY</div>
</body>
This code runs immediately once the page is loaded. The onclick event is completely ignored by javascript. What is an easy fix for this because like youtube when you play a video the document.title is updated with a speaker. I want to learn to do that with external javascript because I can do it with internal javascript in the html.
<!DOCTYPE html>
<html>
<head>
<title> Animation </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="animationcss.css">
</head>
<body>
<script src="animation.js"></script>
<input id="changeButton" type="button" value="Change" ></input>
/External Javascript/
var element = document.getElementById("changeButton");
element.onclick = textChange("changetothis");
function textChange(text){
document.title = text;
}
try calling the function after the document is loaded by placing the script tag below the object or making $(document).ready() function,
this code works fine with me
<!DOCTYPE html>
<html>
<head>
<title> Animation </title>
<meta charset="UTF-8">
</head>
<body>
<input id="changeButton" type="button" value="Change" ></input>
<script src="script.js"></script>
<body>
</html>
and the script is
var el = document.getElementById("changeButton");
el.onclick = function(){
textChange("changetothis");
}
function textChange(text){
document.title = text;
}
You can achieve your desired effect by using an anonymous function, like so:
document.getElementById("changeButton").onclick = function () {
document.title = newTitle;
}
The variable 'newTitle' should be declared & initalized above this code somewhere in order for it to work.
I just started using jQuery, then forgive me for noobish.
What I'm trying to do is 'get reference to a object that is wrapped in a class', but there are more classes with same name.
How can I reach the right object and get the reference to it, when the only thing that will differ it from a thousand other more objects is the text inside the div.
In this case, I'm trying to show only the text "this should be returned", that is under the classes 'ng-anyclass'.
After that, will be possible store the reference to that specific div and change it text? Or any other properties?
Here's the code:
Page 1 - the loader:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var s = $('#result').load('Page2.html .ng-anyclass .ng-anyclass .ng-anyclass');
});
</script>
</head>
<body>
<div id="result"></div>
<div>Other Stuff Here</div>
</body>
</html>
Page 2 - the target page
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="ng-anyclass">
<div class="ng-anyclass">
<div class="ng-anyclass">this should be returned</div>
</div>
<div class="ng-anyclass">
<div class="ng-anyclass">not this</div>
</div>
</div>
</body>
</html>
You can use :eq(0) for this:
jQuery(function($) {
$('#result').load('page2.html .ng-anyclass .ng-anyclass .ng-anyclass:eq(0)', function(){
var _this = $(this)
setTimeout(function(){
_this.find('.ng-anyclass').text('changed');
},1000);
});
});
updated plnkr Demo.
If you want to write text somewhere you can use CSS selector, like this :
$('body .ng-anyclass .ng-anyclass:eq(0) .ng-anyclass').text('your text')
eq(0) it's a shortcut of first-child, or eq(1) is nth-child(2) for example
I hope it will be help you