JavaScript progress bar did not work with OO JS code, but works with arrow function? [duplicate]Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?JavaScript progress bar does not work with OO JS codeConvert character to ASCII code in JavaScriptHow do JavaScript closures work?How to execute a JavaScript function when I have its name as a stringHow does JavaScript .prototype work?Set a default parameter value for a JavaScript functionIs there a standard function to check for null, undefined, or blank variables in JavaScript?Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for itJQuery progress bar - adding Text and changing background colorHow to clear setInterval function?Cannot display HTML string
A social experiment. What is the worst that can happen?
How can Trident be so inexpensive? Will it orbit Triton or just do a (slow) flyby?
Lowest total scrabble score
Count the occurrence of each unique word in the file
What does chmod -u do?
Closed-form expression for certain product
What is the evidence for the "tyranny of the majority problem" in a direct democracy context?
Is there any references on the tensor product of presentable (1-)categories?
"Spoil" vs "Ruin"
Open a doc from terminal, but not by its name
How to indicate a cut out for a product window
How to explain what's wrong with this application of the chain rule?
What should you do when eye contact makes your subordinate uncomfortable?
If a character has darkvision, can they see through an area of nonmagical darkness filled with lightly obscuring gas?
How do I color the graph in datavisualization?
Yosemite Fire Rings - What to Expect?
Which one is correct as adjective “protruding” or “protruded”?
Freedom of speech and where it applies
What is this called? Old film camera viewer?
Has any country ever had 2 former presidents in jail simultaneously?
How could a planet have erratic days?
Redundant comparison & "if" before assignment
It grows, but water kills it
Does an advisor owe his/her student anything? Will an advisor keep a PhD student only out of pity?
JavaScript progress bar did not work with OO JS code, but works with arrow function? [duplicate]
Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?JavaScript progress bar does not work with OO JS codeConvert character to ASCII code in JavaScriptHow do JavaScript closures work?How to execute a JavaScript function when I have its name as a stringHow does JavaScript .prototype work?Set a default parameter value for a JavaScript functionIs there a standard function to check for null, undefined, or blank variables in JavaScript?Pure JavaScript equivalent of jQuery's $.ready() - how to call a function when the page/DOM is ready for itJQuery progress bar - adding Text and changing background colorHow to clear setInterval function?Cannot display HTML string
This question already has an answer here:
Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?
3 answers
This is a question following up this question posted by myself:
JavaScript progress bar does not work with oo js code
Apart from the solution from the above post, I tried to re-write the OO script using arrow functions, the code is:
document.getElementById("barButton").addEventListener("click", callMove);
function callMove()
var bar1 = new ProgressBar();
bar1.move();
function ProgressBar()
this.elem = document.getElementById("myBar"),
this.width = 1;
this.move = () =>
this.id = setInterval(this.frame, 10);
;
this.frame = () =>
if (this.width >= 100)
clearInterval(this.id);
else
this.width++;
this.elem.style.width = this.width + '%';
;
#myProgress
width: 100%;
background-color: grey;
#myBar
width: 1%;
height: 30px;
background-color: black;
<html>
<head>
<title>
This is a OO progress bar test.
</title>
<link rel="stylesheet" href="testOOProgressBar.css">
</head>
<body>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button id="barButton">Click Me</button>
<script src="testOOProgressBar.js"></script>
</body>
</html>And it works without using .bind() (as said in the original post). Why? What's the difference between this arrow function case and the constructor/prototype case in the previous post?
javascript html css oop
edited Mar 7 at 8:17
O.O
732421
asked Mar 7 at 7:41
thinkvantageduthinkvantagedu
828
marked as duplicate by Jack Bashford, Persijn, Community♦ Mar 7 at 9:10
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?
3 answers
This is a question following up this question posted by myself:
JavaScript progress bar does not work with oo js code
Apart from the solution from the above post, I tried to re-write the OO script using arrow functions, the code is:
document.getElementById("barButton").addEventListener("click", callMove);
function callMove()
var bar1 = new ProgressBar();
bar1.move();
function ProgressBar()
this.elem = document.getElementById("myBar"),
this.width = 1;
this.move = () =>
this.id = setInterval(this.frame, 10);
;
this.frame = () =>
if (this.width >= 100)
clearInterval(this.id);
else
this.width++;
this.elem.style.width = this.width + '%';
;
#myProgress
width: 100%;
background-color: grey;
#myBar
width: 1%;
height: 30px;
background-color: black;
<html>
<head>
<title>
This is a OO progress bar test.
</title>
<link rel="stylesheet" href="testOOProgressBar.css">
</head>
<body>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button id="barButton">Click Me</button>
<script src="testOOProgressBar.js"></script>
</body>
</html>And it works without using .bind() (as said in the original post). Why? What's the difference between this arrow function case and the constructor/prototype case in the previous post?
javascript html css oop
edited Mar 7 at 8:17
O.O
732421
asked Mar 7 at 7:41
thinkvantageduthinkvantagedu
828
marked as duplicate by Jack Bashford, Persijn, Community♦ Mar 7 at 9:10
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?
3 answers
This is a question following up this question posted by myself:
JavaScript progress bar does not work with oo js code
Apart from the solution from the above post, I tried to re-write the OO script using arrow functions, the code is:
document.getElementById("barButton").addEventListener("click", callMove);
function callMove()
var bar1 = new ProgressBar();
bar1.move();
function ProgressBar()
this.elem = document.getElementById("myBar"),
this.width = 1;
this.move = () =>
this.id = setInterval(this.frame, 10);
;
this.frame = () =>
if (this.width >= 100)
clearInterval(this.id);
else
this.width++;
this.elem.style.width = this.width + '%';
;
#myProgress
width: 100%;
background-color: grey;
#myBar
width: 1%;
height: 30px;
background-color: black;
<html>
<head>
<title>
This is a OO progress bar test.
</title>
<link rel="stylesheet" href="testOOProgressBar.css">
</head>
<body>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button id="barButton">Click Me</button>
<script src="testOOProgressBar.js"></script>
</body>
</html>And it works without using .bind() (as said in the original post). Why? What's the difference between this arrow function case and the constructor/prototype case in the previous post?
javascript html css oop
edited Mar 7 at 8:17
O.O
732421
asked Mar 7 at 7:41
thinkvantageduthinkvantagedu
828
This question already has an answer here:
Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?
3 answers
This is a question following up this question posted by myself:
JavaScript progress bar does not work with oo js code
Apart from the solution from the above post, I tried to re-write the OO script using arrow functions, the code is:
document.getElementById("barButton").addEventListener("click", callMove);
function callMove()
var bar1 = new ProgressBar();
bar1.move();
function ProgressBar()
this.elem = document.getElementById("myBar"),
this.width = 1;
this.move = () =>
this.id = setInterval(this.frame, 10);
;
this.frame = () =>
if (this.width >= 100)
clearInterval(this.id);
else
this.width++;
this.elem.style.width = this.width + '%';
;
#myProgress
width: 100%;
background-color: grey;
#myBar
width: 1%;
height: 30px;
background-color: black;
<html>
<head>
<title>
This is a OO progress bar test.
</title>
<link rel="stylesheet" href="testOOProgressBar.css">
</head>
<body>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button id="barButton">Click Me</button>
<script src="testOOProgressBar.js"></script>
</body>
</html>And it works without using .bind() (as said in the original post). Why? What's the difference between this arrow function case and the constructor/prototype case in the previous post?
This question already has an answer here:
Are 'Arrow Functions' and 'Functions' equivalent / exchangeable?
3 answers
document.getElementById("barButton").addEventListener("click", callMove);
function callMove()
var bar1 = new ProgressBar();
bar1.move();
function ProgressBar()
this.elem = document.getElementById("myBar"),
this.width = 1;
this.move = () =>
this.id = setInterval(this.frame, 10);
;
this.frame = () =>
if (this.width >= 100)
clearInterval(this.id);
else
this.width++;
this.elem.style.width = this.width + '%';
;
#myProgress
width: 100%;
background-color: grey;
#myBar
width: 1%;
height: 30px;
background-color: black;
<html>
<head>
<title>
This is a OO progress bar test.
</title>
<link rel="stylesheet" href="testOOProgressBar.css">
</head>
<body>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button id="barButton">Click Me</button>
<script src="testOOProgressBar.js"></script>
</body>
</html>document.getElementById("barButton").addEventListener("click", callMove);
function callMove()
var bar1 = new ProgressBar();
bar1.move();
function ProgressBar()
this.elem = document.getElementById("myBar"),
this.width = 1;
this.move = () =>
this.id = setInterval(this.frame, 10);
;
this.frame = () =>
if (this.width >= 100)
clearInterval(this.id);
else
this.width++;
this.elem.style.width = this.width + '%';
;
#myProgress
width: 100%;
background-color: grey;
#myBar
width: 1%;
height: 30px;
background-color: black;
<html>
<head>
<title>
This is a OO progress bar test.
</title>
<link rel="stylesheet" href="testOOProgressBar.css">
</head>
<body>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button id="barButton">Click Me</button>
<script src="testOOProgressBar.js"></script>
</body>
</html>javascript html css oop
javascript html css oop
edited Mar 7 at 8:17
O.O
732421
asked Mar 7 at 7:41
thinkvantageduthinkvantagedu
828
edited Mar 7 at 8:17
O.O
732421
asked Mar 7 at 7:41
thinkvantageduthinkvantagedu
828
edited Mar 7 at 8:17
O.O
732421
edited Mar 7 at 8:17
O.O
732421
edited Mar 7 at 8:17
O.O
732421
732421
asked Mar 7 at 7:41
thinkvantageduthinkvantagedu
828
asked Mar 7 at 7:41
thinkvantageduthinkvantagedu
828
asked Mar 7 at 7:41
thinkvantageduthinkvantagedu
828
828
marked as duplicate by Jack Bashford, Persijn, Community♦ Mar 7 at 9:10
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Jack Bashford, Persijn, Community♦ Mar 7 at 9:10
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The arrow function does not have its own this, its this inherits and the function where the declaration is located.
answered Mar 7 at 7:50
余俊浩余俊浩
21
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The arrow function does not have its own this, its this inherits and the function where the declaration is located.
answered Mar 7 at 7:50
余俊浩余俊浩
21
add a comment |
The arrow function does not have its own this, its this inherits and the function where the declaration is located.
answered Mar 7 at 7:50
余俊浩余俊浩
21
add a comment |
The arrow function does not have its own this, its this inherits and the function where the declaration is located.
answered Mar 7 at 7:50
余俊浩余俊浩
21
The arrow function does not have its own this, its this inherits and the function where the declaration is located.
answered Mar 7 at 7:50
余俊浩余俊浩
21
answered Mar 7 at 7:50
余俊浩余俊浩
21
answered Mar 7 at 7:50
余俊浩余俊浩
21
answered Mar 7 at 7:50
余俊浩余俊浩
21
21
add a comment |
add a comment |
