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>
Related
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
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.
<html>
<head>
<script type="text/javascript">
var image = document.getElementById(image);
var desc = document.getElementById(desc);
var images = ["http://i.imgur.com/XAgFPiD.jpg", "http://i.imgur.com/XAgFPiD.jpg"]
var descs = ["1", "2"]
var num = 0;
var total = images.length;
function clicked(){
num = num + 1;
if (num > total){
num = 0;
}
image.src = images[num];
desc.innerHTML = images[num];
}
document.getElementById(submit).onclick(clicked());
</script>
</head>
<body>
<div><h2>Project |</h2><h2> | herbykit</h2></div>
<div>
<button id="submit">Next</button><br/>
<img id="image" src="http://i.imgur.com/XAgFPiD.jpg" height="20%" width="50%"/>
<p id="desc">first desc.</p>
</div>
</body>
</html>
The line "document.getElementById(submit).onclick(clicked());" throws an error
"ReferenceError: submit is not defined"
When I tried accessing buttons in general
[through getElementsByClassName & getElementsByTagName]
it gave an error of "ReferenceError: button is not defined"
Using strings in getElementById it throws the error "getElementById is null"
I found several questions and answers to this.
Only one of them I understood how to implement, due to the use of PHP and that being the error on most others. Other solutions I found involved errors numerically.
On this error I tried a fix of printwindow.document.getElementById(..etc
This gives me an error of "ReferenceError: printwindow is not defined"
Browsers run JavaScript as soon as possible in order to speed up rendering. So when you receive this code:
<html>
<head>
<script type="text/javascript">
var image = document.getElementById(image); // Missing quotes, typo?
... in runs intermediately. There's no <foo id="image"> on page yet, so you get null. Finally, you get the rest of the page rendered, including:
<img id="image" src="http://i.imgur.com/XAgFPiD.jpg" height="20%" width="50%"/>
It's too late for your code, which finished running long ago.
You need to bind a window.onload even handler and run your code when the DOM is ready (or move all JavaScript to page bottom, after the picture).
It should be document.getElementById('submit').onclick(clicked());
your must enclose the id you are searching for in quotes:
document.getElementById('ID_to_look_up');
You are executing javascript before your 'body' rendered. Thus document.getElementById("submit") would return null. Because there are no "submit" DOM element yet.
One solution is to move your javascripts under 'body', Or use JQuery with
$(document).ready(function() {
...
});
Your variable also has scope problem, your function cannot access variable declared outside this function with 'var' declaration. If you really need that variable, you should remove 'var' declaration.
A better way is to move all your variable inside clicked function. like following code
<html>
<head>
</head>
<body>
<div><h2>Project |</h2><h2> | herbykit</h2></div>
<div>
<button id="submit">Next</button><br/>
<img id="image" src="http://i.imgur.com/XAgFPiD.jpg" height="20%" width="50%"/>
<p id="desc">first desc.</p>
</div>
</body>
<script type="text/javascript">
function clicked(){
var image = document.getElementById("image");
var desc = document.getElementById("desc");
var images = ["http://i.imgur.com/XAgFPiD.jpg", "http://i.imgur.com/XAgFPiE.jpg"];
var descs = ["1", "2"];
var num = 0;
var total = images.length;
num = num + 1;
if (num > total){
num = 0;
}
image.src = images[num];
desc.innerHTML = images[num];
}
document.getElementById("submit").onclick = clicked;
</script>
</html>
I have code which just increments a value by 10 on every button click. I want that code to increment the value whenever I refresh the page. How do I do that?
Here is the code:
<html>
<head>
<script type="text/javascript">
function reveal() {
var val = document.getElementById("outputtext").value;
var result = parseInt(val) + parseInt(10);
document.getElementById("outputtext").value = result;
}
</script>
</head>
<body>
<p> <h3>Click on below button to increase the value by 10<h3> </p>
<button onclick="reveal()"> Increment</button>
<table>
<tr>
<td><textarea id="outputtext">10</textarea></td>
</tr></table>
</body>
</html>
For the title of your question, you might use the following Javascript function to bring up the previous page:
history.back();
as stated in this question on SO: How to emulate browser back button using javascript
If you want to increment a variable on page refresh with Javascript, you should save this variable as a cookie on the users browser:
document.cookie="increment=10";
Either of these links might help you with this: http://www.w3schools.com/js/js_cookies.asp http://www.htmlgoodies.com/beyond/javascript/article.php/3470821
You could do this without cookies, by using a hash (#value) in the URL. Try this code :
<html>
<head>
</head>
<body>
<h3>Click on below button to increase the value by 10<h3>
<button onclick="reveal()"> Increment</button>
<table>
<tr><td><textarea id="outputtext">10</textarea></td></tr>
</table>
<script type="text/javascript">
//Get the last value
var current = parseInt(location.hash.slice(1));
//If it is set, increment it
if(current){
document.getElementById("outputtext").value = current + 10;
location.hash = '#' + (current+10);
}
function reveal() {
var val = document.getElementById("outputtext").value;
var result = parseInt(val) + parseInt(10);
document.getElementById("outputtext").value = result;
//Set the value
location.hash = '#' + result;
}
</script>
</body>
</html>
Note that I moved the javascript to the end of the file, so that #outputtext is already defined when the code gets executed.
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')";}