Why function with name "clear" doesn't work in JavaScript [duplicate] - javascript

This question already has answers here:
Is "clear" a reserved word in Javascript?
(4 answers)
Closed last year.
I wrote a small HTML file. I added few buttons with onclick attributes and wrote my functions inside a "script" tag. All of them are working perfect but the function with name "clear" doesn't work.
HTML:
<div>
<input type="button" value="Copy" onclick="copy();" />
<input type="button" value="Clear" onclick="clear();" />
</div>
JavaScript:
function copy() {
console.log("copy");
navigator.clipboard.writeText(
document.getElementById("result_box").value
);
}
function clear() {
console.log("clear");
}
When I click on both of this buttons browser console shows me only one message: "copy". No errors.
If I change the name of this function it starts working. I don't understand why is it happening. I thought the word "clear" is reserved word of JavaScript but I couldn't find this word in the list of keywords in documentation.
Any ideas?

The reasoning behind this is that clear() inside a button calls document.clear instead of your clear.

Related

Why does JQuery .val() method sometimes return undefined when code is valid? [duplicate]

This question already has answers here:
val() vs. text() for textarea
(2 answers)
Closed 4 years ago.
Not a duplicate question; so please consider the content closely before presumption.
I've been using JQuery for years and have never seen this type of behavior before. Consider the following:
<html>
<div class="order-form-group">
<label class="order-form-label" for="guestSpecialInstructions">Special Instructions:</label>
<textarea class="order-form-textarea" id="guestSpecialInstructions" type="text"></textarea>
</div>
<div class="order-form-group">
<label class="order-form-label" for="guestReason">Reason:</label>
<textarea class="order-form-textarea" id="guestReason" type="text"></textarea>
</div>
<div class="button-container">
<input class="order-form-submit" type="submit" value="Submit">
</div>
</html>
I've observed that the following script in some instances will return 'undefined' even when "all" the more obvious reasons have been eliminated. Such as
having the incorrect selector, having more than 1 id on the page and etc.
<script>
var specInstr = $("#guestSpecialInstructions").val();
var guestReason = $("#guestReason").val();
</script>
I spent literally hours attempting to determine what the disconnect was; stripping my code to the simplest basic level and couldn't find any reasonable explanation for the behavior.
The code is contained within a simple HTML page; nothing fancy and references the JQuery repository https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
I have another project which runs in an aspx page, still the markup is identical and the .val() method works without issue.
After hours of hitting a wall I ran across the post at JQuery: .val() is not working for textarea and someone else attesting to the exact same issue using valid code and the suggestion was:
<script>
var specInstr = $("#guestSpecialInstructions")[0].value;
var guestReason = $("#guestReason")[0].value;
</script>
Then the issue is automagically resolved. Only problem I have with this is that there no one seems to have answered the question of why the JQuery .text() method sometimes return undefined when all aspects of the code is valid.
Resolutions are great but without understanding why the issue exists, really gains nothing intellectually.
If I need to change the wording of the title, let me know.
You can only use text() on a <textarea> if it is pre-populated and to return the original content
Any changes to the content by user or setting new value programatically will not alter what is returned by text() as it will always be the original pre-pre-populated content
Always use val() to get and set
var $txt = $('textarea')
console.log('text() Original content:', $txt.text())
console.log('val() Original content:', $txt.val())
$txt.val( 'Some new content')
console.log('text() after value change:', $txt.text())
console.log('val() after value change:', $txt.val())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="one" type="text">
Original text
</textarea>

Can't change button innerHTML with JS [duplicate]

This question already has answers here:
How to use getElementsByClassName in javascript-function? [duplicate]
(3 answers)
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I can't find a way to change the string "FIND NOW" into something else.
I have tried for hours
<button type="submit" class="qbutton default" style="">FIND NOW</button>
I tried something like this:
<script>
document.getElementsbyClassName('.button.qbutton.default').innerHTML('change it!');
</script>
Could someone help please?
Use document.querySelector('button.qbutton.default') as querySelector() will allow you to select the particular element based on the selector and not list of elements. Also you need to use button as selector and not .button and make sure the script is after the body element to get the HTML rendered properly first.
document.querySelector('button.qbutton.default').innerHTML = 'change it!';
<button type="submit" class="qbutton default" style="">FIND NOW</button>

What is the purpose of this "javaScript:;"in hyperlink? [duplicate]

This question already has answers here:
What is href=javascript:;
(8 answers)
Closed 5 years ago.
What is the purpose of javascript:; in the href attributes of the hyperlinks?
<div data-trigger="spinner" id="spinner">
<span id="spinner-value"></span>
<input type="hidden" value="1" data-spin="spinner" data-rule="quantity" data-max="10">
-
+
</div>
the attribute href="javascript:;" is used to remove the behavior from the link.
If you would use eg. href="", the webpage would reload when you click the link. But with href="javascript:;" nothing will happen.
Later a script adds an event handler that will be executed when clicking this link.
EDIT: You need a or button elements as they are the semantic representatives for clickable objects.
To prevent links from refreshing webpage/redirecting you once clicked.
the purpose of "javascript:;" have save meaning with "javascript:void(0)"
Read here : javascript void functions

how to make enter on input show up on output [duplicate]

This question already has answers here:
angularjs newline filter with no other html
(7 answers)
Closed 6 years ago.
When the user presses enter in the input box I would like that to reflect in the H1 tag.
As you can see when the user types
Line 1
they can press enter and create
line 2 in the input no problem, but the output in the h1 tag is still "Line 1 line 2" all on one line.
Please look at the fiddle as that will make a lot more sense.
I was thinking about using a keypress function to get when the user presses enter and then do something with that? I'm not sure if there is a better way though.
https://jsfiddle.net/BSmyth634/ovz8thrp/
<div ng-app>
<form>
<textarea rows="4" type="text" ng-model="todoText" size="30" placeholder="add new todo here">
</textarea>
</form>
<h1>
{{todoText || 'Hello World'}}
</h1>
</div>
You need to use style="white-space: pre;" in your code to do it.
JS Fiddle
I see two ways to achieve what you want.
Use white-space css property. In your case the pre-line value might be interesting.
Create Angular's filter and use it.
you can use pre element instead of h1
<pre>{{todoText || 'Hello World'}}</pre>
or use this
<h1 ng-repeat="line in todoText.split('\n')">
{{line}}
</h1>
Jquery approach
$("textarea").on('keypress',function(e){
if(e.keyCode == 13){
$('h1').html($("textarea").val())
}
})

output variable value in javascript [duplicate]

This question already has answers here:
How to display JavaScript variables in a HTML page without document.write
(9 answers)
Closed 8 years ago.
Hi I'm working on a personal website and trying to make a comment box.
its still very basic but I have a button that calls a function which stores the values of the name of the person and the comment itself, and then hopefully output it somewhere (I don't care where yet, just want to see an output)
this is a snippet of what I got so far but its not doing anything, and I don't know what I'm doing either ;) so please rescue me
<section class="body_right_comment_input">
<p> Name: </p>
<input type="text" id="name_input"/> </br>
<p> Comment:</p>
<textarea id="comment_input"></textarea>
<button onclick="myFunction()">Click me</button>
</section>
<script type="text/javascript">
function myFunction() {
var commentName = document.getElementById("name_input").value;
var commentValue= document.getElementById("comment_input").value;
document.write(commentName)
document.write(commentValue)
}
</script>
To output something to somewhere in your HTML, you can use innerHTML, which is like this:
document.getElementById('myAnchor').innerHTML="W3Schools";
User innerHTML to output: http://jsfiddle.net/z4hjv/
<section class="body_right_comment_input">
<p>Name:</p>
<input type="text" id="name_input" />
</br>
<p>Comment:</p>
<textarea id="comment_input"></textarea>
<button onclick="myFunction()">Click me</button>
<span id="comment_result"></span>
</section>
function myFunction() {
var commentName = document.getElementById("name_input").value;
var commentValue = document.getElementById("comment_input").value;
document.getElementById("comment_result").innerHTML = commentName + commentValue;
}
FALSE ALARM! my closing bracket was in the wrong place for the function!
However, feel free to answer and suggest a better way to do this or how I can output this into the html itself

Categories