I'm trying to include a separate .js file so I can pull in a class I created but it doesn't work, can someone tell me why?
playercharacter.js
function PlayerCharacter() {
this.x = 0;
this.y = 0;
this.dx = 5;
this.dy = 5;
}
PlayerCharacter.prototype.sayHello = function()
{
alert ('hello');
};
index.html
<html>
<head>
<script src="js/playercharacter.js" type="text/javascript" ></script>
</head>
<body>
<script type="text/javascript" >
var player = new PlayerCharacter();
player.sayHello();
</script>
</body>
</html>
You forgot wrap your JS-code into the <script> tags
<html>
<head>
<script src="js/playercharacter.js" type="text/javascript" ></script>
</head>
<body>
<script type="text/javascript" >
var player = new PlayerCharacter();
player.sayHello();
</script>
</body>
</html>
Your JavaScript code is not in a script tag.
<script>
var player = new PlayerCharacter();
player.sayHello();
</script>
You need to surround the code in the body with a <script> tag.
Related
The library I am using: https://github.com/icambron/moment-countdown
My code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- https://github.com/icambron/moment-countdown -->
<script src="moment.min.js"></script>
<script src="countdown.min.js"></script>
<script src="moment-countdown.min.js"></script>
</head>
<body>
<input type="datetime-local" id="timeInputHTML" onchange="mainfunc()>
<p id="pel"></p>
<script>
function mainfunc() {
timeVar = document.getElementById("timeInputHTML").value;
// var timeInputVar = moment("2045-01-01 00:00:00").countdown().toString();
var timeInputVar = moment(timeVar).countdown().toString();
document.getElementById("pel").innerHTML = timeInputVar;
}
// Run above function every 1 second
setInterval(mainfunc, 1000);
</script>
</body>
</html>
The question: How do I make the variable timeVar when it obtains its values from timeInputHTML in the HTML code, not contain contain a T in the middle like so: "2018-05-05T14:30" I believe this is what is wrong with my code and is causing the Uncaught TypeError if it is not the issue then please can you explain to me what is please?
The image / screenshot:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- https://github.com/icambron/moment-countdown -->
<script src="moment.min.js"></script>
<script src="countdown.min.js"></script>
<script src="moment-countdown.min.js"></script>
</head>
<body>
<input type="datetime-local" id="timeInputHTML" onchange="mainfunc()">
<p id="pel"></p>
<script>
function mainfunc() {
timeVar = document.getElementById("timeInputHTML").value;
// var timeInputVar = moment("2045-01-01 00:00:00").countdown().toString();
var timeInputVar = moment(timeVar).countdown().toString();
document.getElementById("pel").innerHTML = timeInputVar;
}
// Run above function every 1 second
setInterval(mainfunc, 1000);
</script>
</body>
</html>
your are missing " this in input function it should be like this
<input type="datetime-local" id="timeInputHTML" onchange="mainfunc()">
I have this code:
<script src="https://secure.ewaypayments.com/scripts/eCrypt.js"
class="eway-paynow-button"
data-publicapikey=""
data-amount="1000"
data-currency="AUD" >
</script>
How can I set data-amount from a Javascript function?
you can try following
(assuming you have the class eway-paynow-button only to the script element)
document.getElementsByClassName("eway-paynow-button")[0].dataset.amount = 1000;
Or a more generic solution
var elems = document.getElementsByClassName("eway-paynow-button");
for (var i = 0; i < elems.length; i++) {
if(elems[i].getAttribute('src') === "https://secure.ewaypayments.com/scripts/eCrypt.js") {
elems[i].dataset.amount = 1000;
}
}
To expand on nikhil's solution, you can change the text like so:
document.getElementsByClassName("eway-paynow-button")[0].setAttribute("data-amount", "2000");
document.getElementsByClassName("eway-button")[0].firstElementChild.innerHTML = "Pay Now ($20.00)";
You can Use my jQuery Solution to change your button text problem
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>X</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="https://secure.ewaypayments.com/scripts/eCrypt.js"
class="eway-paynow-button"
data-publicapikey=""
data-amount="1000"
data-currency="AUD" >
</script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
$(".eway-paynow-button").attr("data-amount",2000);
});
</script>
</body>
</html>
I have a simple code where templating is to be done by Mustache.js, but failing to show anything on screen. There are no errors also in console. Kindly Help!
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js" ></script>
<script>
$(document).ready(function(){
var person = {
firstName: "Christophe",
lastName: "Coenraets",
blogURL: "http://coenraets.org"
};
var template = "<h1>{{firstName}} {{lastName}}</h1>Blog: {{blogURL}}";
var html = Mustache.to_html(template, person);
$('#div1').html(html);
});
</script>
</head>
<body>
<div id="#div1"></div>
</body>
</html>
Anyone, can tell where is the problem?
Replace '#div1' to 'div1' of id attribute in div tag
http://plnkr.co/edit/m14fkua89UOAjlX506U5?p=preview
Just replace #div1 to div
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.1.3/mustache.js" ></script>
<link rel="stylesheet" href="style.css">
<script>
$(document).ready(function(){
var person = {
firstName: "Christophe",
lastName: "Coenraets",
blogURL: "http://coenraets.org"
};
var template = "<h1>{{firstName}} {{lastName}}</h1>Blog: {{blogURL}}";
alert(template);
var html = Mustache.to_html(template, person);
alert(html);
$('#div1').html(html);
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
How do I make an iframe load all parent window's scripts?
I was thinking something like this:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="somethingelse.js"></script>
</head>
<body>
<iframe>
<html>
<head>
<script>
for (var i=0;i<window.parent.document.scripts.length;i++){
var script = window.parent.document.scripts[i];
//now it should append 'script' to document.scripts (this iframe scripts array)
}
</script>
</head>
<body>
</body>
</html>
</iframe>
</body>
</html>
PS: I made it as simple as possible. The real code is much bigger.
Try:
for (var i in window.parent.document.scripts){
var parentScript = window.parent.document.scripts[i];
var newScript = document.createElement('script');
if(parentScript.src)
newScript.src = parentScript.src;
if(parentScript.innerHTML)
newScript.innerHTML = parentScript.innerHTML;
document.head.appendChild(newScript);
}
I have a JavaScript variable and I want the HTML div to output 7.
I know it's simple, but I can't seem to get my head around this.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var ball = 3+4;
</script>
</head>
<body>
<div>Have 7 output here</div>
</body>
</html>
Give a specific id to the div like:
<div id="data"></div>
Now use the following JavaScript code.
<script type="text/javascript">
var ball = 3+4;
document.getElementById("data").innerHTML=ball;
</script>
Working code is here
Write your script in body.
Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Have 7 output here</div>
<script type="text/javascript">
var ball = 3+4;
document.getElementsByTagName('div')[0].innerHTML = ball;
</script>
</body>
</html>
Try this:
<head>
<script type="text/javascript">
var ball = 3+4;
function op()
{
document.getElementById('division').innerHTML=ball;
}
</script>
</head>
<body onload="op();">
<div id="division">Have 7 output here</div>
</body>
Fiddle
HTML
<html>
<body>
<div id="add_results_7"></div>
</body>
</html>
JavaScript
<script>
var ball = 3+4;
document.getElementById('add_results_7').innerHTML=ball; // Gives you 7 as your answer
</script>
Try this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
onload = function () {
var ball = 3 + 4;
var div = document.getElementsByTagName("div")[0];
div.innerHTML = ball;
};
</script>
</head>
<body>
<div>Have 7 output here</div>
</body>
</html>
onload is executed when the page is fully loaded, so the DIV is ready to be manipulated. getElementsByTagName("div") returns a list of all DIVs in the page, and we get the first one ([0]) since there is only one DIV in your code.
Finally, I guess innerHTML doesn't require any explanation :-)