For onclick, when to use `onclick="confirmOnSubmit()` vs `onclick="confirmOnSubmit` [duplicate] - javascript

This question already has answers here:
what's the difference between <a onclick="someFunction"> and <a onclick="someFunction()">
(3 answers)
Closed 6 years ago.
I'm very new to HTML and JavaScript. I have seen onclick been assigned to function with following parentheses onclick="confirmOnSubmit() and functions without following parentheses onclick="confirmOnSubmit.
I was just wondering what is the difference between the two? When should I use one over the other?
<input type="submit" value="Submit" id="submitID" onclick="confirmOnSubmit()"/>

using parentheses after a function name means invoking that function.However, using it without a parentheses just means the function itself.
<input type="submit" value="Submit" id="submitID" onclick="confirmOnSubmit()"/>
so in your example, it is basically saying that whenever the submit btn is clicked, invoke the confirmOnSubmit function.
<input type="submit" value="Submit" id="submitID"/>
document.getElementById('submitID').onclick=confirmOnSubmit
however, in the above example, we don't want to call the function at that moment, we just want to assign a reference, so that it can be called later on when the event happens.
hope it helps.

Related

calc is not defined at HTMLbutton.onclick [duplicate]

This question already has answers here:
Why does this simple JSFiddle not work? [duplicate]
(8 answers)
Closed 3 years ago.
I am beginner to JS and receiving error on this code.
I could not make it work and getting this error:
calc is not defined at HTMLButtonElement.onclick
Searching different stackoverflow questions and other sources online
<form>
Value 1: <input type="text" id="value1"> Value 2: <input type="text" id="value2">
<br/> Operator:
<select id="operator">
<option value="add">Add</option>
</select>
<button type="button" onclick="calc()">Calculate</button>
</form>
<input type="text" id="result"/>
JS Code:
function calc(){
var n1 = parseInt(document.getElementById('value1').value);
var v2 = parseInt(document.getElementById('value2').value);
var op = document.getElementById('operator').value;
if(op === 'add'){
document.getElementById('result').value = n1+n2;
}
I am getting the error I shared above in console.
JSFiddle
You're getting that error because the calc function is not defined when the HTML is rendered, therefore the onclick instruction can't point to it. Later on, when the user clicks on the button, the JavaScript engine notices that you're trying to execute an undefined function and throws an error.
You can solve this by registering the event listener after you define the function in your script, for example with this line (though things would be much better if the button also had an id):
document.getElementsByTagName("button")[0].addEventListener("click", calc);
For reference, see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Clear a textarea via a button in javascript only [duplicate]

This question already has answers here:
Is "clear" a reserved word in Javascript?
(4 answers)
Why can't I call a function named clear from an onclick attribute?
(3 answers)
How to clear a textbox using javascript
(15 answers)
Closed 4 years ago.
I only know how to use Javascript and HTML5
I have tried so many ways to clear textarea but they won't work
<textarea id="texti" placeholder="Place Text Here Or Paste Text"></textarea>
<button class="button" type="button" onclick="clear()">CLEAR</button>
<script type="text/javascript">
function clear(){
document.getElementById("texti").innerHTML= "";
}
</script>
in the function part I have tried
document.getElementById("texti").value=0;
document.getElementById("texti").value="";
but apparently none of theme works in my code
End your textarea tag
Use .value
Do NOT use reserved words like clear
function clearIt() {
document.getElementById("texti").value = "";
}
<textarea id="texti" placeholder="Place Text Here Or Paste Text">XXX</textarea>
<button class="button" type="button" onclick="clearIt()">CLEAR</button>

addEventListener vs onclick when callback function changes [duplicate]

This question already has answers here:
Is JavaScript a pass-by-reference or pass-by-value language?
(33 answers)
Closed 4 years ago.
My HTML code is below:
My question is, why does it show "before" dialog when clicking Button 1, but show "after" dialog when clicking Button 2?
<html>
<body>
<button id="b1">Button 1</button>
<button id="b2" onclick="OnClick();">Button 2</button>
<script>
var OnClick = function(){alert("before");};
document.getElementById("b1").addEventListener("click", OnClick);
var OnClick = function(){alert("after");};
</script>
</body>
</html>
JSFiddle link: https://jsfiddle.net/72chrqnf/
Cause OnClick gets evaluated to the first function before you change the variable pointing to a different function. When this line gets evaluated:
document.getElementById("b1").addEventListener("click", OnClick);
it evaluates OnClick and results in:
document.getElementById("b1").addEventListener("click", [a reference pointing to the function])
and therefore changing OnClick does not affect it afterwards.

Add an onclick function to existing HTML code with DOM [duplicate]

This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
My task is to inject a custom JS function to an HTML code where we cannot edit buttons and HTML it self, just inject some custom HTML code through GUI. What I have in the code:
<input class="ContinueAsAGuest LinkButton" name="submitForm" type="submit" value="Continue as a guest >" />
What I need:
<input class="ContinueAsAGuest LinkButton" name="submitForm" type="submit" value="Continue as a guest >" onclick = "captureOutcome()" />
I wanted to use DOM, but I failed, I stay get the original code. This what I have:
var guest = getElementsByClassName("ContinueAsAGuest LinkButton");
guest.onclick = "captureOutcome()";
function captureOutcome(
{'eventName':'event registration','eventAction':'start' }
);
I am guessing what I miss is to add the actual onclick to the original code.
Am I on the right path?
You need to use document.getElementsByClassName to get the element with that class name and if that is a unique class then use [0] to get the reference of that element. By getting the reference you can associate a click function into it.
var guest = document.getElementsByClassName("ContinueAsAGuest LinkButton")[0];
guest.onclick = captureOutcome;
function captureOutcome(){
alert('clicked!');
};
<input class="ContinueAsAGuest LinkButton" name="submitForm" type="submit" value="Continue as a guest >" />

why object "this" work in first situation and doesn't work in another, why it "undefined" [duplicate]

This question already has answers here:
How does the "this" keyword work, and when should it be used?
(22 answers)
Closed 6 years ago.
first situation:
<span id="username" onclick="alert(this.innerHTML);">[Василий]</span>
after click on text "[Василий]" i see text in dialog window "[Василий]". OK. But in second situation when I'd written code below I saw "undefined", why?
<script type="text/javascript" charset="utf-8">
function func() {
alert(this.innerHTML);
}
</script>
<span id="username" onclick="func();">[Василий]</span>
Basically you have no reference to the object, you clicked on. You could take this as parameter and get the value in the function.
function func(t) {
alert(t.innerHTML);
}
<span id="username" onclick="func(this);">[Василий]</span>

Categories

Resources