This question already has answers here:
Is "clear" a reserved word in Javascript?
(4 answers)
Closed 6 years ago.
function clear() {
document.getElementById("1").innerHTML = '';
document.getElementById("2").innerHTML = '';
document.getElementById("3").innerHTML = '';
}
<button onclick="clear()">Clear</button>
That is the function and my button that runs it.
The purpose of the function is to clear the paragraphs, but the button does nothing when I tested it out.
Why is this function not running when the button is clicked?
EDIT: sorry if the answer is obvious, i'm a beginner to JS
EDIT: HTML:
<p id="1"></p>
<p id="2"></p>
<p id="3"></p>
There is also a JS function that changes the text of the Paragraphs, but it doesn't loop
Don't name the function clear as the DOM has an old global method named clear. Try something else like clearMe
function clearMe() {
document.getElementById("1").innerHTML = '';
document.getElementById("2").innerHTML = '';
document.getElementById("3").innerHTML = '';
}
<div id="1">
foo
</div>
<div id="2">
foo
</div>
<div id="3">
foo
</div>
<button onclick="clearMe()">Clear</button>
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Javascript onclick function is called immediately (not when clicked)? [duplicate]
(1 answer)
Closed 9 months ago.
please if someone would be so kind and help me, i would be very happy, clearing i'm a beginner so help if you can, please.
the html
<div>
<h2>TO-DO LIST</h2>
<input type="text" id="tasks" class="List" placeholder="add">
<input type="submit" id="subButton" onclick="action()">
<!-- <button type="button" id='resetBut' onclick="deleteIl()">Reset</button>-->
<div>
<ul id="myUl" ></ul>
the js
function action() {
let item = document.createElement('li');
let inputValue = document.getElementById('tasks').value;
var t = document.createTextNode(inputValue);
item.appendChild(t);
if (inputValue === '') {
alert("you must write something!");
} else {
document.getElementById('myUl').appendChild(item);
}
document.getElementById('tasks').value = '';
const tasksDelete = document.createElement("button");
tasksDelete.classList.add("delete");
tasksDelete.innerHTML = 'X';
item.appendChild(tasksDelete);
document.getElementsByClassName("delete").onclick = log();
//document.getElementsByClassName("delete").addEventListener("click", log());
function log() {
console.log("name")
}
//tasksDelete.document.getElementById('myUl');
//tasksDelete.removeChild();
}
i'm trying to put a delete button on the elements 'li' (this works), and trying to use the removeChild() but i'm getting 'Uncaught ReferenceError: removeChild is not defined', so to see if it's working i've change the removeChild() for the log function, and now the log function appears in the console when a press the subButton and not when i click on the delete button.
This question already has answers here:
Reserved keywords in JavaScript
(8 answers)
Closed 1 year ago.
HTML:-
<button type="button" onclick="alert()">Want a greeting?</button>
Javascript:-
function alert(){ alert('working...') }
refference image
Call your function anything other than alert. It's a reserved keyword, and the error your code gives you is:
InternalError: too much recursion
function handleClick() {
alert('working...');
}
<button type="button" onclick="handleClick()">Want a greeting?</button>
alert() is a built-in method of JavaScript.
https://developer.mozilla.org/en-US/docs/Web/API/Window/alert
If you change the name of your function that will fix the issue:
function test(){ alert('working...') }
<button type="button" onclick="test()">Want a greeting?</button>
You can override the alert method but you can't recursively call the same function. The issue you're running into is an infinite recursion, you're calling alert > alert > alert > alert > ...
Something like this would work, though.
window.alert = function alert(message){ console.log(message) }
<button type="button" onclick="alert('test')">Want a greeting?</button>
<button type="button" onclick="click()">Want a greeting?</button>
<script> let click = () => {alert('working...');}</script>
This question already has answers here:
How to access the webpage DOM/HTML from an extension popup or background script?
(2 answers)
Closed 1 year ago.
I've been trying to make an extension with chrome, but it seems like when I try to run this simple code:
function reddenPage() {
var bar = document.getElementsByClassName('nav rbx-navbar hidden-xs hidden-sm col-md-5 col-lg-4');
//console.log(bar[0].appendChild(bar[0].childNodes[2].cloneNode(true)));
if(bar[0]==null){
return false;
}else{
return true;
}
}
It returns :
Any help would be lovely, thank you so much!
As I understand You should do with :
document.querySelectorAll()
Example :
var x = document.querySelectorAll("h1, div");
You can't use .getElementByClassName() because getElementByClassName() only applies to single elements.
Different from querySelectorAll() which is flexible to select all variants of elements.
You will always find undefined if you use getElementsByClassName() for your case.
Example getElementsByClassName():
HTML:
<button class="btn btn-lg" onclick="reddenPage()">Click me</button>
<div class="same"></div>
<div class="same"></div>
<div class="same"></div>
Javascript:
function reddenPage(){
var x = document.getElementsByClassName('same');
console.log(x[0]);
if(x[0]==null){
alert("element found "+x.length);
}else{
alert("element found "+x.length);
}
}
Example queryselectorAll():
<button class="btn btn-lg" onclick="reddenPage_()">Click me</button>
<div class="diffrent-1"></div>
<div class="diffrent-2"></div>
<div class="diffrent-3"></div>
<div class="diffrent-4"></div>
Javascript:
function reddenPage_(){
var x = document.querySelectorAll('.diffrent-1, .diffrent-2, .diffrent-3, .diffrent-4');
console.log(x[0]);
if(x[0]==null){
alert("element found "+x.length);
}else{
alert("element found "+x.length);
}
}
Example getElementsByClassName() will return undefined:
function reddenPage_(){
var x = document.getElementsByClassName('diffrent-1 diffrent-2 diffrent-3 diffrent-4');
console.log(x[0]);
if(x[0]==null){
alert("element found "+x.length);
}else{
alert("element found "+x.length);
}
}
//Response undefined
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 5 years ago.
I've searched for about a good 1 hour and found nothing. I've attempted the 'fixes' I've come across and they do not work on my code. Albeit that the code provided works on its own file, it does not work within mine.
Html:
<div class="result">Pizza</div>
<div class="choices">
<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissors</button>
</div>
</body>
</html>
JS:
let buttons = document.getElementById("#rock").addEventListener("click");
let rock = document.querySelector('#rock');
//check if id exists
let str,
element = document.getElementById('.choices #rock');
if(element != null){
str = elemen.value;
console.log(str);
}else{
str = null;
console.log(str);
}
if it need be, I'll post my entire code. Hopefully, this is enough to replicate the error on your end.
Thanks in advance!
getElementById takes only an id as argument, not a query.
Either use
element = document.querySelector('.choices #rock');
or
element = document.getElementById('rock');
The second form is much cleaner as only one element can have a given id. Keep composite query finished by an id to the very rare cases you want to apply it to the case the element may be or not be inside an another one.
You have some typos, but you are also missing a load or DOMContentLoaded listener. You are likely querying for the element before it exists on the page:
document.addEventListener('DOMContentLoaded', function() {
var rock = document.querySelector('#rock');
var str;
if (rock) {
str = rock.value;
console.log(str);
} else {
str = null;
console.log(str);
}
});
<div class="choices">
<button id="rock" value="rock">Rock</button>
<button id="paper" value="paper">Paper</button>
<button id="scissors" value="scissors">Scissors</button>
</div>
I don't understand the logic of your code, but you need to change the way you're getting the elements.
You're trying to get element by id, however, what you really want is get the element using querySelector.
Check on the changes I did on your code.
let buttons = document.getElementById("rock").addEventListener("click", function() {});
let rock = document.querySelector('#rock');
//check if id exists
let str;
let element = document.querySelector('.choices #rock');
if (element != null) {
str = element.value;
console.log(str);
} else {
str = null;
console.log(str);
}
<div class="choices">
<button id="rock" value="rock">Rock</button>
<button id="paper" value="paper">Paper</button>
<button id="scissors" value="scissors">Scissors</button>
</div>
This question already has answers here:
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 6 years ago.
I am trying to validate a text box to enter only numbers and not alphabets using javascript NaN function.
But i am not getting the correct output
<html>
<body>
<input type="text" id="demo">
<button onclick="myFunction();">Try it</button>
<script>
function myFunction()
{
var x =document.getElementById("demo");
if (isNaN(x))
{
alert("hi");
}
else
{
alert("world");
}
}
</script>
</body>
</html>
x in your code will be an HTMLInput object. It will never be a number.
You want to test the value of parseInt(x.value).