All I'm getting in my output is changeColor is not defined and changeAgain is not defined. I have tried to fix it but it doesn't seem to work. Any help would be appreciated, I have looked everywhere!!!
Here's my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body onLoad="alert('Website Loaded');">
<script language="javascript" type="text/javascript">
function changeColor() {
document.GetElementById("h3style").style.color = "red";
document.GetElementById("h3style").firstChild.nodeValue = "RED!";
return true;
}
function changeAgain() {
document.GetElementById("h3style").style.color = "gray";
document.GetElementById("h3style").firstChild.nodeValue = "Gray...";
return true;
}
</script>
<noscript>
<h1>THIS CONTENT REQUIRES JAVASCRIPT | PLEASE ENABLE JAVASCRIPT</h1>
</noscript>
<h3 id="h3style" onMouseOver="changeColor()" onMouseOut="changeAgain()">Scroll on me</h3>
</body>
</html>
It should be getElementById.
Check docs here
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body onLoad="alert('Website Loaded');">
<script language="javascript" type="text/javascript">
function changeColor() {
document.getElementById("h3style").style.color = "red";
document.getElementById("h3style").firstChild.nodeValue = "RED!";
return true;
}
function changeAgain() {
document.getElementById("h3style").style.color = "gray";
document.getElementById("h3style").firstChild.nodeValue = "Gray...";
return true;
}
</script>
<noscript>
<h1>THIS CONTENT REQUIRES JAVASCRIPT | PLEASE ENABLE JAVASCRIPT</h1>
</noscript>
<h3 id="h3style" onMouseOver="changeColor()" onMouseOut="changeAgain()">Scroll on me</h3>
</body>
</html>
Related
after to make some research I took the measures to guarantee that the JS will be loaded before trying to run it but... it won't work!
This works:
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1" charset="utf-8">
</head>
<html>
<body>
<script type="text/javascript">
function initialize() {
console.log('foo')
}
window.onload = function() {
initialize();
};
</script>
</body>
</html>
But this doesn't:
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1" charset="utf-8">
</head>
<html>
<body>
<script type="text/javascript" src="test.js">
<script type="text/javascript">
window.onload = function() {
initialize();
};
</script>
</body>
</html>
test.js:
function initialize() {
console.log('foo')
}
I don't get any error. It just doesn't work. What am I doing wrong?
Thanks!
You need a closing script tag for the tag that is calling the external js file.
<script type="text/javascript" src="test.js"></script>
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>
So I'm being asked to create a side by side "frame" in html. When content from the iframe on the left is selected, it populates the link in an iframe next to it on the same page.
Additional background: The left hand side is the menu bar generated from Tableau and the right hand side would be the visualization attached. Using target like in the code below hasn't worked:
<div id="left">
<iframe src="http://www.weather.gov/" target="myDemoFrame"></iframe>
</div>
<div id="right">
<iframe name="myDemoFrame" src=""></iframe>
</div>
Any advice is much appreciated.
Assuming you control both pages, you can message between the iframes with postMessage, with the left window messaging the parent and the parent messaging the right child, an example is below:
outer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.frame {
width: 45vw;
height:95vh;
}
</style>
</head>
<body>
<iframe src="left.html" class="frame" id="left"></iframe>
<iframe src="right.html" class="frame" id="right"></iframe>
</body>
<script>
var l = document.getElementById("left");
var r = document.getElementById("right");
window.onmessage = function(e){
if (l.contentWindow == e.source) {
r.contentWindow.postMessage(e.data, '*')
}
};
</script>
</html>
left.html
<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="clickEvent()">SEND</button>
</body>
<script>
function clickEvent() {
window.top.postMessage({"payload": "Hello from the other side"}, '*')
}
</script>
</html>
right.html
<!DOCTYPE html>
<html lang="en">
<body>
</body>
<script>
window.onmessage = function(e){
if (e.source == window.top) {
if (e.data["payload"]) {
alert(e.data["payload"]);
}
}
}
</script>
</html>
Edit - Pure navigation answer
outer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.frame {
width: 45vw;
height:95vh;
}
</style>
</head>
<body>
<iframe src="left.html" class="frame" id="left"></iframe>
<iframe class="frame" id="right"></iframe>
</body>
<script>
var l = document.getElementById("left");
var r = document.getElementById("right");
window.onmessage = function(e){
if (l.contentWindow == e.source && e.data["payload"]) {
r.src = e.data["payload"]
}
};
</script>
</html>
left.html
<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="navigate('http://www.bing.com')">BING</button>
<button onclick="navigate('http://www.example.com')">EXAMPLE</button>
</body>
<script>
function navigate(url) {
window.top.postMessage({"payload": url}, '*')
}
</script>
</html>
I am new to qunit.I am running simple testcase in qunit.but nothing is getting displayed on screen.
This is HTML Runner:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Demo</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css">
<script src="//code.jquery.com/qunit/qunit-1.14.0.js"></script>
<script src="MyJsUnitTests.js"></script>
<script src="MyJsSourceCode.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
This is MyJsSourceCode.js
var ArthimeticOperations = {
addTwoNumbers : function (number1, number2) {
return number1 + number2;
}
}
This is MyJsUnitTests.js
test('Addition Test', function () {
strictEqual(ArthimeticOperations.addTwoNumbers(3, 5), 8, "Tested the addition functionality");
});
Try swapping the source code and test code includes... my guess is that your tests start running before the source code is included in the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Demo</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css">
<script src="//code.jquery.com/qunit/qunit-1.14.0.js"></script>
<!-- SWAP THESE TWO...
<script src="MyJsUnitTests.js"></script>
<script src="MyJsSourceCode.js"></script>
Like so:
-->
<script src="MyJsSourceCode.js"></script>
<script src="MyJsUnitTests.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
I want to display div on page load e.g."campaign-alert", but I am not able to do this .
This is sample code :
<div id="popup">
<div id="campaign-alert" style="display:none;">
.
.
.
</div>
</div>
I have tried this way as well :
document.getElementById('campaign-alert').style.display="";
document.getElementById('campaign-alert').style.display="block";
Can anybody help me in this ?
Try this. It will help you.
Using Jquery
$(document).ready(function () {
$("#campaign-alert").show();
});
Using JavaScript
window.onload = function () {
document.getElementById("campaign-alert").style.display = "block";
};
try the following
$(function () {
$("#campaign-alert").show();
});
You shaould try it using onload()
HTML:
<body onload="load()">
<div id="popup">
<div id="campaign-alert" style="display:none;">
.
.
.
</div>
</div>
</body>
Javascript:
function load(){
document.getElementById('campaign-alert').style.display="block";
}
$(document).ready(function () {
$("#campaign-alert").show();
});
Where #campaign-alert selects the element with id campaign-alert
You can do it using below function its working and tested.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function remove_style(all)
{
var i = all.length;
var j, is_hidden;
var attr =
[
'style'
];
var attr_len = attr.length;
console.log(attr_len);
j = attr_len;
all.removeAttribute(attr[0]);
}
function showdiv()
{
var all = document.getElementById('campaign-alert');
remove_style(all);
}
</script>
</head>
<body onload="showdiv();">
<div id="popup">
<div id="campaign-alert" style="display:none;">
<h1>show me </h1>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body onload="myFunction()">
<div id="popup">
<div id="campaign-alert" style="display:none;">
.1
.2
.3
</div>
</div>
<script>
function myFunction() {
document.getElementById("campaign-alert").style.display = "block";
}
</script>
</body>
</html>