error with changing a div background with javascript after refresh - javascript

I'm trying to setup a script that will change the background of a DIV with each page fresh.
This is my code.
Untitled Document
<script type="text/javascript">
var totalCount = 3;
function ChangeIt()
{
var num = Math.ceil( Math.random() * totalCount );
document.getElementById("content").style.backgroundImage = "url('bgimages/'"+num+"'.jpg')";}
</script>
</head>
<body>
<div id="content">
hello
</div>
<script type="text/javascript">
ChangeIt();
</script>
</body>
</html>
The problem is that it's not changing and I'm getting this error:
Error in parsing value for 'background-image'. Declaration dropped.
I'm not sure what I'm doing wrong.
Thanks in advance!

document.getElementById("content").style.backgroundImage = "url('bgimages/"+num+".jpg')";}

Related

Replaced fixed variables in JS with inputs from HTML

I have downloaded some JavaScript code which creates a credit card paydown graph with and without overpayment. This code has fixed variables.
I would like to add HTML inputs for the user submit, however the script is connecting to a remote reference so I'm struggling to add a function to connect the script to HTML. Can HTML inputs be incorporated, if so, how?
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.3/clipboard.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js">
</script>
<script type="text/javascript" src="https://www.moneymage.net/mm.min.js"></script>
<div id="creditcard-interest-chart"></div>
<!--want to add input variables here-->
<script type="text/javascript">
//preventing me adding function below...
moneymage.ready(() => {
//fixed variables below...
var creditCardBalance = 5500;
var interestRate = 19.5 / 100.0;
var minimumMonthlyRepaymentPercent = 2.5 / 100.0;
var minimumMonthlyRepaymentFixed = 15.0;
var optionalMonthlyRepaymentOverAndAboveMinimum = 175;
var months = 25 * 12;
moneymage.createCreditCardInterestChart(creditCardBalance,
interestRate,
minimumMonthlyRepaymentPercent,
minimumMonthlyRepaymentFixed,
optionalMonthlyRepaymentOverAndAboveMinimum,
months,
"creditcard-interest-chart");
});
</script>
</body>
If you are waiting for user input you probably don't need to wait for moneymage to be ready, so you can just trigger the moneymage.createCreditCardInterestChart on a submit function for a form with the inputs you want.
This example would be the general idea to get you started: https://codesandbox.io/s/compassionate-night-sl156?file=/index.html

Uncaught ReferenceError: startm is not definedonmouseover # (index):188

I have a problem with my website. If I hit refresh a few times the homepage loads but the videos on it stop loading. Using element inspector in Chrome I get;
Uncaught ReferenceError: endm is not definedonmouseout # (index):131
Uncaught ReferenceError: startm is not definedonmouseover # (index):188
Any idea what this is?
I've found this and solved the issue.
But I want to know if there is a way to set this kind of code at the server level to work for multiple websites located on the same server ?
<!DOCTYPE html>
<html>
<body>
<h1 id="test"> Mouse </h1>
<div id="count"> </div>
<div id="count2"> </div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var textonout = "Mouse out";
var count =0;
var out = 0;
var textonover = "Mouse Over";
$("h1").mouseover(function(){
$("h1").css("background-color","yellow");
document.getElementById("count").innerHTML = count++;
document.getElementById("test").innerHTML = textonover;
});
$("h1").mouseout(function(){
$("h1").css("background-color","lightgray");
document.getElementById("test").innerHTML = textonout;
document.getElementById("count2").innerHTML = out++;
});
});
</script>
</body>
</html>

UnCaught Reference: variable is not defined

I need to keep track of counter while using ng-repeat module.
I have a counter set before the ng-repeat code as :
<script type="text/javascript" var counter = 0;></script>
Then come my important code :
<div class= "col-md-4" ng-repeat="coffeedata in coffecataloge">
<img id="product-images" style="margin-top:20px;margin-left:30px;width:50px;height:50px"/>
<script type="text/javascript" >
counter += 1;
</script>
</div>
Now the thing is I get an error when I am trying to increment the value of counter saying "Uncaught ReferenceError: counter is not defined"
Any idea how can I achieve my task ?
This is not valid html, nor is it javascript:
<script type="text/javascript" var counter = 0;></script>
You should put the var counter = 0; inside the script tag, same as you did with the second script:
<script type="text/javascript">
var counter = 0;
</script>

Undefined when doing document.write() with button OnClick="counter"

I'm new to programming and would need some help, why the document.write() didn't work and basically the page crashes... Can anyone help me?
<!DOCTYPE html>
<html>
<head>
</head>
<script type="text/javascript">
function showText() {
var x;
var counter;
if ( x === 0) {
counter = 0;
x = 1;
}
counter = counter + 1;
document.write("Times clicked: " + counter);
}
</script>
<body>
<script type="text/javascript">
showText();
</script>
<button onclick="showText();">Click Me!<button>
</body>
</html>
Avoid using document.write
Quoting from the MDN Developer Network documentation page:
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.
So basically, your issue is using document.write after the page has loaded: this will result in deleting the entire content of the page and displaying that string.
Also, your code doesn't work because your count variable is declared inside the showText function, and you're trying to access it outside of it, running into an error.
Solution
To make your code work you should create another element, let's say a <p> element, and display the text inside of it. Here's an example of a correct page:
<!DOCTYPE html>
<html>
<head></head>
<body>
<button id="btn">Click me!</button>
<p id="txt">Times clicked: 0</p>
<script type="text/javascript">
function showText() {
count++;
text.textContent = "Times clicked: " + count;
}
var count = 0,
button = document.getElementById("btn"),
text = document.getElementById("txt");
button.addEventListener("click", showText);
</script>
</body>
</html>
Check out a live demo here.

.innerHTML problems storing it into a variable

Here is my code that is not working - thanks guys - first question!
<html>
<head>
<script type="text/javascript">
var x =document.getElementById("myElementId").innerHTML;
</script>
</head>
<body>
<div id="myElementId">24</div>
<div>
<script type="text/javascript">
if (x < 25) {
document.write("worked")
}
else {
document.write("didn't work")
}
</script>
Also sorry for the update but do you guys have an idea of how to do this when the div is in an iframe thats not on the same domain? Thanks
This line
var x = document.getElementById("myElementId").innerHTML;
is executed before the element with ID myElementId exists, so JavaScript cannot find it (getElementById returns null).
Put it after the element:
<div id="myElementId">24</div>
<script>
var x = document.getElementById("myElementId").innerHTML;
</script>
The HTML document is processed from top to bottom.
You're running this line:
var x =document.getElementById("myElementId").innerHTML;
before the element exists. Remove the script from the head an put that line right before:
if(x < 25) {
Instead.
In addition to the creating the element first,
I believe innerHtml returns a string value
Try parsing it first;
var value = document.getElementById("myElementId").innerHTML;
var x = parseInt(value,10)
change it to:
<html>
<head>
</head>
<body>
<div id="myElementId">24</div>
<div>
<script type="text/javascript">
var x =document.getElementById("myElementId").innerHTML;
if (x < 25) {
document.write("worked")
}
else {
document.write("didn't work")
}
</script>
the element that you are trying to look for does not even exist on the page when you run the script that is why you have run into this issue..
document.getElementById("myElementId").innerHTML;
You have to use a # with Id and . with class in it
document.getElementById("#myElementId").innerHTML;

Categories

Resources