I was making my first pure Js project of todolist. I want when user adds an item in the list it gets it placed at the list. I was using this code I saw in a tutorial but it gives an error.
It gives an error: jeep.insertAdjacentHTML is not a function
Here is the markup:
<section class="listContent">
<div class="container">
<ul class="list" id="deep">
<li style="text-align: center" id="itemList">
<!-- < i class="fa fa-circle-o pull-left" id = "circle" aria - hidden="true" > </i>
<p class="text" > DRINK COFFEE < /p>
<i class="fa fa-trash pull-right" id = "delete" aria - hidden="true" > </i> -->
</li>
</ul>
</div>
</section>
Here is the JS
const date = document.getElementById("date");
const jeep = document.getElementById("deep");
const items = document.getElementById("itemList");
function addToDo(todo) {
const item =
`<i class="fa fa-circle-o pull-left" job="complete" id="circle" aria-hidden="true"></i>
<p class="text"> ${todo}</p>
<i class="fa fa-trash pull-right" id="delete" job="delete" aria-hidden="true"></i>
` ;
const position = "beforeend";
console.log(item);
console.log(position);
jeep.insertAdjacentHTMl(position, item);
}
addToDo("drink coffe");
first try .insertAdjacentHTML - the L should be capitalized. Also it looks like in the HTML markup that element lives inside of the <li> no adjacent to it. It looks like you might want to use .appendChild() on the <ul id="deep"></ul>
Related
I am trying to create an if conditional based on what city a user selects off the dropdown menu. It has presented itself a challenge because it's bulmas CSS dropdown which does not use <selector> and <option> but all <div>s.
// The Dropdown for Cities
const root = document.querySelector(".cities");
root.innerHTML = `
<div class='dropdown'>
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Choose a City</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class='dropdown-content'>
<a href='#' id="myCity" value="oak" class='dropdown-item'>
Oakland, CA
</a>
<a href='#' id="myCity" value="san" class='dropdown-item'>
San Francisco, CA
</a>
</div>
</div>
</div>
`;
I tried value as you can see, but that will not work.
const myCity = document.getElementById("myCity");
myCity.addEventListener("mousedown", (event) => {
if (
<HTMLInputElement>(
document.getElementById("dropdown-menu").value.includes("san")
)
) {
console.log("this will show us San Francisco");
} else if (
<HTMLInputElement>document.getElementById("dropdown-menu").value === "oak"
) {
console.log("this will show us Oakland");
} else {
return null;
}
});
Change the dropdown <a> ids to class instead to prevent duplicate ids. Also use a data- attribute since <a> does not have value.
Then check the target of the event
const dropdown = document.querySelector('#dropdown-menu')
document.querySelector('.dropdown-trigger button').addEventListener('click', (e)=>{
dropdown.classList.toggle('active');
});
dropdown.addEventListener('click', (e)=>{
e.preventDefault()
if(e.target.matches('.dropdown-item.city')){
const cityName = e.target.dataset.value;
console.log('City =', cityName);
dropdown.classList.toggle('active');
}
})
#dropdown-menu { display:none}
#dropdown-menu.active{display:block}
<div class='dropdown'>
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Choose a City</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class='dropdown-content'>
<a href='#' data-value="oak" class='city dropdown-item'>
Oakland, CA
</a>
<a href='#' data-value="san" class='city dropdown-item'>
San Francisco, CA
</a>
</div>
</div>
</div>
It renders after the page loads but I have no idea how I can target that. It's wrapped in an anchor tag and I tried to set the z-index of that anchor tag to like 9999 so it's goes above the icon and I can target that but it's not working either.
<nav class="menu">
<div class="icon-list">
<a class="highlight" href="#szolgáltatásaim"><i class="far fa-bell"></i><span>Szolgáltatásaim</span></a>
<a class="highlight" href="#rólam"><i class="far fa-user"></i><span>Rólam</span></a>
<a class="highlight" href="#munkáim"
><i class="far fa-folder-open"></i><span>Munkáim</span></a>
<a class="highlight" href="#oktatás">
<i class="fas fa-chalkboard"></i><span>Oktatás</span></a>
<a class="highlight" href="#árak"
><i class="far fa-bookmark"></i><span>Árak</span></a >
<a class="highlight" href="#marketing"
><i class="far fa-lightbulb"></i><span>Marketing</span></a>
<a class="highlight" href="#üzenet"
><i class="far fa-envelope"></i><span>Üzenet</span></a>
</div>
</nav>
I think your question needs more details so we can help you better. That being said, if you're trying to target multiple elements use class. If you're trying to target one specific element use ID. For this to work you'll need to add such properties to your <i> icons in your html code. Here's an example snippet. Is this what you need?
function changeAll() {
var elements = document.querySelectorAll('.far,.fas'); // To target multiple elements use class
for(var i = 0; i < elements.length; i++){
elements[i].style.color = "red";
}
}
function changeBell() {
document.getElementById("bell").style.color = "green"; // To target one specific element use ID
}
<script async src="https://kit.fontawesome.com/0f49cf42f1.js" crossorigin="anonymous"></script>
<nav class="menu">
<div class="icon-list">
<a class="highlight" href="#szolgáltatásaim"><i class="far fa-bell" id="bell"></i><span>Szolgáltatásaim</span></a>
<a class="highlight" href="#rólam"><i class="far fa-user"></i><span>Rólam</span></a>
<a class="highlight" href="#munkáim"><i class="far fa-folder-open"></i><span>Munkáim</span></a>
<a class="highlight" href="#oktatás">
<i class="fas fa-chalkboard"></i><span>Oktatás</span></a>
<a class="highlight" href="#árak"><i class="far fa-bookmark"></i><span>Árak</span></a >
<a class="highlight" href="#marketing"
><i class="far fa-lightbulb"></i><span>Marketing</span></a>
<a class="highlight" href="#üzenet"><i class="far fa-envelope"></i><span>Üzenet</span></a>
</div>
</nav>
<br>
<button type="button" onclick="changeAll()">Change color of all icons</button>
<br>
<button type="button" onclick="changeBell()">Change color of bell only</button>
so basically I'm trying to reproduce some kind of Trello, and what I'm trying to do, is to create (or clone) an existing div, and insert it before the button. Yes I know, there's a method called ".insertBefore()" but I actually tried, it works... But halfway.
This is how the div should look like
Blocks are disposed in this way, and as I said, what I am trying to do is when I click on the "Add Category button" It clones the div and inserts it before the button.
Nothing difficult I know I know. I actually managed to achieve this, but halfway : It works. But only once.
I looked what's happening in the inspector and I noticed, that everytime I click on "Add Category", the div I just cloned, is actually replaced by the div itself. So I can only add it once, not more.
There is my code :
window.onload = function() {
var board = document.querySelector('#board');
var model = document.querySelectorAll('#model');
//creating the block, didn't use .cloneNode()
var newTask = document.createElement('div');
newTask.className='newTask';
newTask.appendChild(document.createElement('p'));
newTask.querySelector('p').innerHTML = 'New Task';
newTask.appendChild(document.createElement('i'));
newTask.querySelector('i').className = 'fa fa-plus';
var newCategory = document.createElement('div');
newCategory.className = 'category';
newCategory.appendChild(newTask);
/* Look like this :
* <div class="category">
* <div class="newTask">
* <p>New Task</p>
* <i class="fa fa-plus">
* </div>
* </div>
*/
var addCategory = document.querySelector('#addCategory');
addCategory.onclick = function() {
board.insertBefore(newCategory, addCategory);
};
};
<div id="board">
<div class="category hidden" id="model">
<div class="newTask">
<p>New task</p>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
<div class="category">
<div class="newTask">
<p>New task</p>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<div class="task">
<h3>Task title</h3>
<p>This is the description of what we have to do</p>
</div>
</div>
<div class="category" id="addCategory">
<h3>Add a category</h3>
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</div>
</div>
So this is what's happening : https://i.neilrichter.com/c7kd3.gif (File too large sorry)
How would you solve this ? I forgot to mention it, but I'm not allowed to use jQuery...
You are only creating the div once (when the window loads) and then inserting that same div every time the onclick handler runs.
You need to create a new div each time the onclick handler runs:
window.onload = function() {
var board = document.querySelector('#board');
var model = document.querySelectorAll('#model');
var addCategory = document.querySelector('#addCategory');
addCategory.onclick = function() {
var newTask = document.createElement('div');
newTask.className='newTask';
newTask.appendChild(document.createElement('p'));
newTask.querySelector('p').innerHTML = 'New Task';
newTask.appendChild(document.createElement('i'));
newTask.querySelector('i').className = 'fa fa-plus';
var newCategory = document.createElement('div');
newCategory.className = 'category';
newCategory.appendChild(newTask);
board.insertBefore(newCategory, addCategory);
};
};
<div id="board">
<div class="category hidden" id="model">
<div class="newTask">
<p>New task</p>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
<div class="category">
<div class="newTask">
<p>New task</p>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<div class="task">
<h3>Task title</h3>
<p>This is the description of what we have to do</p>
</div>
</div>
<div class="category" id="addCategory">
<h3>Add a category</h3>
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</div>
</div>
Hello I want to toggle one specific panel but if I click on the button the panels of other objects will be opened. How can I just open the clicked panel?
toggle.component.ts
opened:Boolean=false;
toggle () {
this.opened = !this.opened;
}
HTML
<div class="main" *ngFor="let x of data; let i=index;">
<footer>
<div class="icons">
<span id="{{item.id}}" (click)="toggle()">6<i class="fa fa-users {{i}}" ></i></span>
<span >6<i class="glyphicon glyphicon-picture"></i></span>
<span >6<i class="glyphicon glyphicon-tag"></i></span>
<div class="iconsRight pull-right">
<span >EXIF<i class="glyphicon glyphicon-info-sign"></i></span>
<span ><i class="fa fa-map-marker"></i></span>
<span ><i class="fa fa-share-alt-square"></i></span>
</div>
</div>
</footer>
<div class="togglePanel{{item.id}}" *ngIf="opened" >
<hr/>
<ul class="toggleWrapper">
<li>YES</li>
<hr/>
<li>YES</li>
<hr/>
<li>YES</li>
<hr/>
<li>YES</li>
</ul>
</div>
</div>
You need to save state of individual panel. Currently you just set one variable which toggles all the panels.
In your toggle.component.ts, add a variable to store every item's state:
togglePanel: any = {};
Then, change your html to following:
<div class="main" *ngFor="let x of data; let i=index;">
<footer>
<div class="commentAgent">Text des Bewerters, der die Bearbeitung dieses Bildes vorgenommen hat</div>
<div class="icons">
<span id="{{item.id}}" (click)="togglePanel[i] = !togglePanel[i]">6<i class="fa fa-users {{i}}" ></i></span>
<span>6<i class="glyphicon glyphicon-picture"></i></span>
<span>6<i class="glyphicon glyphicon-tag"></i></span>
<div class="iconsRight pull-right">
<span>EXIF<i class="glyphicon glyphicon-info-sign"></i>/span>
<span><i class="fa fa-map-marker"></i></span>
<span><i class="fa fa-share-alt-square"></i></span>
</div>
</div>
</footer>
<div class="togglePanel{{item.id}}" *ngIf="togglePanel[i]">
<hr/>
<ul class="toggleWrapper">
<li>YES</li>
<hr/>
<li>YES</li>
<hr/>
<li>YES</li>
<hr/>
<li>YES</li>
</ul>
</div>
</div>
Also, you don't need the toggle() method and the variable opened in this approach.
If you need only one panel opened, then this method will work. Instead on setting your 'flag' property boolean, use number. It will keep the panel id. Set it to the panel id and you don't need an additional property on your data:
Typescript:
opened = -1;
toggle (index) {
this.opened = index;
}
HTML:
....
<span id="{{item.id}}" (click)="toggle(item.id)">6<i class="fa fa-users {{i}}" ></i>
...
<div class="togglePanel{{item.id}}" *ngIf="opened===item.id" >
I am using jquery not to remove html of elements.
I don't get jQuery not() work in proper way. It removes all elements from children except the last one that I mentioned.
My Html-
<body>
<div id="edit-save-section">
<button id="edit-button" class="btn btn-info btn-large">
<span><i class="fa fa-cog"></i> EDIT</span>
</button>
<button class="division-twenty btn btn-success btn-large" data-loading-text="Saving..." class="btn btn-primary" id="btn_save"><span><i class="fa fa-save"></i> SAVE</span>
</button>
</div>
<nav id="menu">
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
</li>
</ul>
</nav>
<div class="removable-section">
<b><i class="fa fa-arrows fa-2x"></i></b>
<a class="span1 pull-right remove-section-action" rel="tooltip" title="Remove section" data-placement="left" href="javascript:;"><b><i class="fa fa-times fa-2x"></i></b></a>
</div>
<div id="allhtml"></div>
</body>
Clearing html with jQuery-
$('#btn_save').click(function () {
var notAll = $('body').children().not("#menu", ".removable-section", "#edit-save-section").html();
$('#allhtml').append(notAll);
console.log($('#allhtml').html());
});
Somehow I managed removing #menu and .removable-section , But I can't remove #edit-save-section
And If i try to change order of these sections like-
var notAll = $('body').children().not("#menu","#edit-save-section",".removable-section").html();
Then it acts weird. It doesn't remove from body the last children found in above html structure. Here in this case it is .removable-section.
Let me know what is that I am doing wrong?
You can also use JQuery Clone to achieve this
$('#btn_save').click(function () {
var notAll = $('body').clone(true);
notAll.find("#menu").remove();
notAll.find(".removable-section").remove();
notAll.find("#edit-save-section").remove();
$('#allhtml').append(notAll);
});