This question already has answers here:
previousSibling and nextSibling returns text?
(2 answers)
Closed 3 months ago.
I'm trying to get my edit button to work as well as my delete button, but it gives me the following error message in the console "e.target.previousSibling.previousSibling.setAttribute is not a function".
this is the code I'm trying to add for my edit functionality,
I have found a similar issue, but it didn't solve the problem I have
const editBtn = document.createElement("button");
editBtn.classList.add("edit");
editBtn.textContent = "Edit";
newLi.appendChild(editBtn);
editBtn.addEventListener("click", () => {});
document.querySelector("*").addEventListener("click", (e) => {
if (e.target.className !== "edit") return;
e.target.previousSibling.previousSibling.setAttribute(
"contenteditable",
"true"
);
e.target.previousSibling.previousSibling.focus();
});
It's likely that there are empty text elements between your elements
Use previousElementSibling intead
Related
This question already has answers here:
Question mark and colon in JavaScript
(8 answers)
Closed 1 year ago.
I have a section of code that adds a class to a button if clicked and takes the class off if another button is clicked and adds that class specifically to that button.
specificButtons.forEach(button => {
button.addEventListener('click', ()=> {
const innerDiv = button.childNodes[1];
(document.querySelector('.inner-button')) ? document.querySelector('.inner-button').classList.remove('inner-button') : '';
innerDiv.classList.add('inner-button');
});
button.addEventListener('click', ()=> {
pledgeOffers.forEach(offer => {
console.log(offer);
});
});
});
I specifically took this line of code from a website and added my own classes and it works great with my project, however i'm not sure what it does and would like to understand what it's doing and why it's doing it. I tried many different If statements to get the code to work and nothing worked until I found this line. Could someone please help explain.
(document.querySelector('.inner-button')) ? document.querySelector('.inner-button').classList.remove('inner-button') : '';
exp ? exp1 : exp2; means if exp is true it will jump to exp1, otherwise exp2.
You can get more informantion from Conditional (ternary) operator
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 1 year ago.
I am trying to make an input text and a button when pressed will add to a ul list but I keep having this error in the console and I don't know why
Uncaught TypeError: btn.addEventListener is not a function at script.js:5
Code :
var text = document.getElementsByClassName('text');
var list = document.querySelector('.list');
var btn = document.getElementsByClassName('add');
btn.addEventListener("click", function(){
var content = document.createElement('li')
content.innerText = text.value
list.append(content)
})
You are getting this error because getElementsByClassName returns an array of all elements having the given class. To solve this error you have two options:
Make add id instead of class and use getElementById to get that element.
var btn = document.getElementById('add');
If you do not want to make add id, we know getElementsByClassName returns an array you can access the elements inside this array by its index.
var btn = document.getElementsByClassName('add')[0];
In this case, keep in mind that the button you are trying to access with add class should be the first element with this classname.
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
Hoping you good folk can help me with this one. I am trying to use a nav link to show a hidden div when clicked but I keep getting the error message
"Uncaught TypeError: Cannot read property 'display' of undefined
at HTMLAnchorElement."
this appears for the line of code = if (contentOneClick.style.display == "none") yet if i taker either the word "style" or the word "display" out of this code then i do not get the error message which has left me confused as i have watched content of this being used and working well for others. below is the whole function code. The display is set to "none" in the style code. I am new to web development so my apologies if this is a silly question.
`document.getElementById('content-one').addEventListener("click", function() {
var contentOneClick = document.getElementsByClassName(".content-one-container");
if (contentOneClick.style.display == "none")
{
console.log ("content is hidden");
}
else
{
console.log("content is visible");
}
}); `
The problem is that getElementsByClassName returns a nodeList, therefore, you should specify which element having class content-one-container you want to use:
var contentOneClick = document.getElementsByClassName("content-one-container")[0];
^ remove the .
This question already has answers here:
How to remove one specific selected file from input file control
(5 answers)
Closed 3 years ago.
I was trying to delete or remove an object from Filelist of <input type="file"multiple/> in Javascript or JQuery but could not remove or delete the object.
I was trying to delete with an operator like delete $(input[type="file"]).files[0]; but is not working either.
You can do something like this:
let deleteButton = document.getElementById("deleteFiles");
deleteButton.onclick = function () {
let element = document.getElementById("filesInput");
console.log("Files: ");
console.log(element.files);
element.value = '';
console.log("Files after removal: ");
console.log(element.files);
}
<input type="file" id="filesInput">
<button id="deleteFiles">delete file</button>
This is implemented on vanillaJavascript but you can use Jquery to help you throw the implementation.
This question already has answers here:
What's the difference between '$(this)' and 'this'?
(7 answers)
Closed 7 years ago.
I have a simple object of input checkbox elements and want to check in an each loop which ones are checked and the do stuff. The checkboxes are in one tr in several td's in a table.
Here is my code:
$('table.occupancy-table').on('change', '.minimum_stay input', function() {
var minimumStayInputs = $(this).closest('tr').find('input');
$(minimumStayInputs).each(function(){
if(this.prop('checked')) {
//do stuff
}
}
}
If I console.log this in the each loop, I get data like:
<input id="R11520" type="checkbox" name="minimum_stay[152][1442786400]" value="checked">
<input id="R11521" type="checkbox" name="minimum_stay[152][1442872800]" value="checked">...
But I always get an error Uncaught TypeError: this.prop is not a function from this.prop('checked'). I also tried .is(":checked") with the same result.
Any ideas what the reason might be?
Let me know if you need sample html or I should create fiddle.
this inside the loop is the native DOM element, unwrapped from jQuery.
It has to be wrapped again
$('table.occupancy-table').on('change', '.minimum_stay input', function() {
var minimumStayInputs = $(this).closest('tr').find('input');
$(minimumStayInputs).each(function(){
if ( $(this).prop('checked') ) {
}
});
});
You could also just use the native this.checked, or if you're trying to count them
$(this).closest('tr').find('input:checked').length