This question already has answers here:
toggle checkbox with javascript
(4 answers)
Closed 2 years ago.
Very basic question here, I am using a JS library to add keyboard shortcuts, I want to check and uncheck a checkbox using the same line of commands, but I am not sure about how to do this, here is the code:
shortcuts.add('alt+s', function() {
document.getElementById("menu-toggle").checked = true
})
How can I use the same shortcut to uncheck the same element?
document.getElementById("menu-toggle").checked = false;
Thanks in advance!
I recommend Element.toggleAttribute:
const toggleChecked = () => document.getElementById('menu-toggle').toggleAttribute('checked');
document.getElementById('myBtn').addEventListener('click', toggleChecked);
<input id="menu-toggle" type="checkbox"> Check me
<br><br>
<button id="myBtn">Click me</button>
Related
This question already has answers here:
What does innerHTML do in javascript?
(11 answers)
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed last month.
I can't fix this simple problem, I created a simple button and then a title which says "hello" .
If you press that button the text of the title should be changed for another text (any text I don´t care).
If I use jQuery it works perfectly, but I want to do this without jQuery just for learning.
document.querySelector(".btn").addEventListener("click", function() {
document.querySelector("h1").innerHTML("hola como estas")
});
<h1 class="title">HELLO</h1>
<button class="btn" type="button"> Click me</button>
I use all the getElement and more and it doesn't work, it's supposed to change the text.
const btn = document.querySelector("button");
const chngTxt = document.querySelector("h1");
btn.addEventListener("click", function () {
chngTxt.innerHTML = "hola como estas";
})
<h1>Hello</h1>
<button id="changeText">click me</button>
or you can just change your innerHTML to quotation mark
document.querySelector(".btn").addEventListener("click", function(){
document.querySelector("h1").innerHTML = "hola como estas";
});
This question already has answers here:
Get element from which onclick function is called
(9 answers)
Closed 1 year ago.
I want to color these elements using the same function. When I click on one of them, the same element that was clicked will be colored. How is that done using JavaScript
<button class="btn" onclick="color()">A</button>
<button class="btn"onclick="color()">B</button>
const $button = document.querySelector('.btn')
$button.addEventListener('click', () => {
$button.style.color = "#0099ff"
})
This question already has answers here:
Check if checkbox is checked with jQuery
(26 answers)
Closed 2 years ago.
I have an input like
<input type="checkbox" name="acept" id="acept">
and some simple JS/jquery code like
$('#acept').click(function(){
/* if( $("#acept").checked ){
alert(" I'm checked ");
} */
if( this.checked ){
alert(" I'm checked ");
}
})
Now, the first 'if' (the commented one) doesn't work, but the second one does.
Any explanation as to why?
That is because $("#acept") is a jQuery object and does not have any property checked on that directly, you can either use index or do that using jQuery's builtin methods like .prop('checked') or .is(':checked'):
$('#acept').click(function(){
console.log($("#acept").checked); //undefined
if( $("#acept").is(':checked') ){
alert(" I'm checked ");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="acept" id="acept">
This question already has answers here:
Native javascript equivalent of jQuery :contains() selector
(6 answers)
Closed 3 years ago.
I'm making a chrome extension and i want to do an action when a certain element exist on the page. But the class element isn't precise enough to select the element only by it's class.
the element i'm looking for on pages is the following :
<span class="btn-text">M'y emmener</span>
I tried :
const listfull = document.querySelector('.btn-text:contains("m\'y emmener")');
if (listfull) {
console.log("hello")
}
But it doesn't seems to work anybody could tell me how this works ?
:contains is jQuery-specific syntax. It's also case-sensitive. To achieve what you're looking for, either use jQuery and capitalize the M:
const listfull = $(`.btn-text:contains("M'y emmener")`);
if (listfull.length) {
console.log("hello")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="btn-text">M'y emmener</span>
Or iterate over all matches of .btn-text and check their textContent:
const listfull = [...document.querySelectorAll(`.btn-text`)]
.find(elm => elm.textContent.includes("M'y emmener"));
if (listfull) {
console.log("hello")
}
<span class="btn-text">M'y emmener</span>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 years ago.
Title may not be correct but i didnt know how to ask my question !
I have encountered a problem with this keyword . While using it as in this code <input type="text" onkeyup="this.value=this.value.toUpperCase();"></input>
it works perfectly. But when i allot a function on input element that uses this keyword , it dont work as in
HTML
<input type="text" ></input>
Javascript
var inp=document.getElementsByTagName('input')[0];
inp.onkeyup=up;
function up()
{
this.value=this.value.toUpperCase();
}
Can you bind onkeyup event in HTML? If yes then use this code:
<script>
function up(element) {
element.value = element.value.toUpperCase();
}
</script>
<input type="text" onkeyup="up(this)"></input>
How about taking it off of the global scope? Try binding in an IIFE:
(function bindEventHandler(tag) {
var inp = document.getElementsByTagName(tag)[0];
inp.onkeyup = function up() {
this.value=this.value.toUpperCase();
};
}('input'));
If you do it this way, make sure to add the script at the end of your body tags, and then it'll work.