Develop Reference

when clicking on a class append the element

i fixed the old question ty for helping this is my second question
There's one more thing i need to know. How can i select a child of "user chat_user"?
var anchors = document.getElementsByClassName("user chat_user");
for(var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
anchor.onclick = function() { setTimeout(function() {
var ok = document.getElementsByClassName("user-dropdown")[0];
var za = document.createElement("li");
za.className = "user-dropdown-entry";
za.innerText = "Mention";
ok.append(za);}, 10);
}
}

You have to ensure your element is defined/exists.
Try this:
let ok = document.querySelector(".user-dropdown");
// Ensure the class `.user-dropdown` exists
if (ok) {
// Only loop through how many exist, no more
Array.from(document.getElementsByClassName("user chat_user")).forEach(anchor => {
anchor.onclick = () => {
// Use querySelector to select only the first of child here
let za = document.createElement("li");
za.className = "user-dropdown-entry";
za.innerText = "Mention";
ok.append(za);
}
});
}
.user.chat_user {
border: 1px solid black;
display: inline-block;
}
<dive class="user-dropdown">user dropdown</div>
<ul class="messages">
<li class="chat_msg msg-user-message">
<div class="colorbar user"></div>
<span class="user chat_user">
<span class="chat_user_prof">
<img src="https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars/e8/e852c40b62be21a16b9f6d69a584e742d7364abb.jpg"></span>
<span class="xp_70">
<i class="icon"></i>
<span class="level_val">79</span>
</span>
<a class="chat_user_name">ChickenİX * 1</a>
<span class="chat_user_ico">
<i class="icon-gammdom-symbol"></i>
<span class="chat_user_colen">:</span>
</span>
</span>
<span class="chat_cont">İg diyon xd</span>
</li>
</ul>

Javascript only addEventListener to parent style both parent and child differently

Currently have a div that controls the width of an element as well as the background color. That div has a child div which has the content which is semi-transparent. Which is why I need the first div. So the background is solid.
Now, I added an event listener to the parent which expands the width of one and decreases the width of the other 2 so they all fit. However, when I click on the parent div I would like the child of that specific div to add a class and remove a class from the other 2. Which I can't seem to figure out. Here's the code. Sorry if my formatting is poor, first time posting on stack overflow and I've googled and searched everything for an answer and can't seem to find one.
var purchaseStepCont = document.querySelectorAll(".step-container");
var purchaseStep = document.querySelectorAll(".step");
for (var i = 0; i < purchaseStepCont.length; i++) {
purchaseStepCont[i].addEventListener("click", function() {
for (var i = 0; i < purchaseStepCont.length; i++) {
purchaseStepCont[i].classList.remove("stepContActive");
purchaseStepCont[i].classList.add("stepContDeactive");
this.classList.add("stepContActive");
this.classList.remove("stepContDeactive");
}
});
}
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>

You're very close. But if you want to add the class to the .step, you need this.firstElementChild.classList.add(...) rather than this.classList.add(...) (since this will be the .step-container, not the .step; but the .step is its first element child). Or for more markup flexibility, you could use this.querySelector(".step").
You can also use just a single event handler function rather than recreating it in the loop:
var purchaseStepCont = document.querySelectorAll(".step-container");
var purchaseStep = document.querySelectorAll(".step");
function clickHandler() {
var thisStep = this.firstElementChild; // Or this.querySelector(".step") would be more flexible
for (var i = 0; i < purchaseStep.length; i++) {
if (purchaseStep[i] === thisStep) {
purchaseStep[i].classList.add("stepContActive");
purchaseStep[i].classList.remove("stepContDeactive");
} else {
purchaseStep[i].classList.remove("stepContActive");
purchaseStep[i].classList.add("stepContDeactive");
}
}
}
for (var i = 0; i < purchaseStepCont.length; i++) {
purchaseStepCont[i].addEventListener("click", clickHandler);
}
.stepContActive {
color: blue;
}
.stepContDeactive {
color: #ddd;
}
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>
clickHandler could be a bit shorter if you don't need to support IE11:
function clickHandler() {
var thisStep = this.firstElementChild; // Or this.querySelector(".step") would be more flexible
for (var i = 0; i < purchaseStep.length; i++) {
purchaseStep[i].classList.toggle("stepContActive", purchaseStep[i] === thisStep);
purchaseStep[i].classList.toggle("stepContDeactive", purchaseStep[i] !== thisStep);
}
}
But IE11 doesn't support the second argument to classList.toggle.

How to change style of elements that aren't "(obj)"

I have multiple items in a row that I want to easily change the style of the border based on my selection.
Here is the HTML of just the row and some of the items in it:
<div class="items">
<ul>
<li class="item-hold">
<span class="item icon64x64">
<img class="item-img icon64x64" src="css/img/3001.png" alt="Abyssal Scepter" id="as">
</span>
</li>
<li class="item-hold">
<span class="item icon64x64">
<img class="item-img icon64x64" src="css/img/3020.png" alt="Sorcerer's Shoes" id="ss">
</span>
</li>
<li class="item-hold">
<span class="item icon64x64">
<img class="item-img icon64x64" src="css/img/3025.png" alt="Iceborn Gauntlet" id="ig">
</span>
</li>
</ul>
</div>
I have tried to do if !(obj).style..... However that won't work and I cannot find any solutions anywhere.
I Know how to do this with states and cases. However, I didn't want my JS to be a few 100 lines long.
So here is my js
var as = document.getElementById('as');
var ss = document.getElementById('ss');
var ig = document.getElementById('ig');
as.addEventListener('click', function() {
ItemDisc('as');
});
ss.addEventListener('click', function() {
ItemDisc('ss');
});
ig.addEventListener('click', function() {
ItemDisc('ig');
});
function ItemDisc(obj) {
var change = document.getElementById(obj);
var changeback = document.getElementById(!obj);
change.style.border = "5px solid blue";
for(!obj) {
changeback.style.border = "5px solid blue";
}
}

You can also use this as your JS:
var imgs = document.getElementsByClassName('item-img');
for(i=0; i<imgs.length; i++) {
imgs[i].addEventListener('click', function(){
for (i=0; i<imgs.length; i++)
imgs[i].style.border='1px solid blue';
this.style.border = '1px solid red';
});
}

This is a basic demo that could be improved upon.
The main idea is to loop through all the items and "reset" them to their default state. Then apply the selection style to the selected element.
<div class="items">
<ul>
<li>
<img src="https://placehold.it/50x50&text=01">
</li>
<li>
<img src="https://placehold.it/50x50&text=02">
</li>
<li>
<img src="https://placehold.it/50x50&text=03">
</li>
</ul>
</div>
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 0 1rem;
}
.highlight {
border: 2px solid red;
}
// Get all items.
var items = document.querySelectorAll( '.items li' );
// Adding/removing selection style via a CSS class.
function addHighlight() {
// Loop through all items and remove the selection class.
for ( var i = 0, len = items.length; i < len; i++ ) {
items[i].className = items[i].className.replace( 'highlight', '' );
}
// Add selection class to selected item.
this.className += ' highlight';
}
// Add click event handler to items.
function addEventListener( items, event, listener ) {
for ( var i = 0, len = items.length; i < len; i++ ) {
items[ i ].addEventListener( event, listener );
}
}
addEventListener( items, 'click', addHighlight );
Demo JSFiddle.

I dont understand what you are trying to do, so I can't recreate something in its entirety.
I can point you in the right direction though.
Your problem is on line
var changeback = document.getElementById(!obj)
!obj is being resolved to the Boolean 'false', and not the element you are selecting.
Furthermore, you are using 'for', when you should be using 'if'
For is creating loops, and 'if' is for conditions
if(!obj) {
changeback.style.border = "5px solid blue";
}
Also, the border color is exactly the same.
I think it is possible to achieve what you want by changing your ItemDisc(obj) function to this.
function ItemDisc(obj){
element = document.getElementById(obj);
if(element.classList.contains('active')){
element.className += " active";
element.style.border = "5px solid blue";
} else {
element.className = "";
// Careful, because this will remove all classes from your element.
}
}
Just wanted to say... This is without jQuery, also, you can make it easier by adding styles to your css class 'active' which included borders.
}

This is very simple to do with jQuery. I'd recommend learning jQuery because it will familiarize you with both css-selectors and JavaScript. Here's a boilerplate to get you started, please forgive any typos:
<style>
.active{border:5px solid #0000FF;}
</style>
$(".item-img").click(function(){
.each(".item-img"){
myFunction( $(this).attr("id") );
}
});
function myFunction(theID){
if( $(this).attr("id") == theID ){
$(this).addClass("active");
}else{
$(this).removeClass("active");
}
}
You will want to load jQuery in your html. Also, you'll need to wrap the js above in:
$(document).ready(function(){/*above code goes here*/});

How to use the jQuery Selector in this web application?

I am trying to work out to select a delete icon in my own web application. delectIcon
HTML
<main>
<div class="container">
<div class="tabs">
<p><span class="active">Newest</span></p><a href=""><p>
<span>Oldest</span></p></a><p><span>Add</span></p>
</div>
<div class="content">
<ul>
<li>
<span class="itemLeft">Answer emails</span>
<span class="itemMiddle">12-31-2016</span>
<span class="itemRight">1</span>
<b class="deleteIcon"> X </b>
</li>
<li>
<span class="itemLeft">Prep for Monday's class</span>
<span class="itemMiddle">12-31-2016</span>
<span class="itemRight">5</span>
<b class="deleteIcon"> X </b>
</li>
</ul>
</div>
</div>
</main>
JavaScript
$(".deleteIcon").on("click", function () {
alert("Oh, clicked!");
return false;
});
I failed to do so by writing it myself. So I used Chrome Web Developer Tool to find the CSS path. I tried to use the XPath($"[/html/body/main/div/div[2]/ul/li[ 1 ]/b]") and CSS Path ($"(pathbody > main > div > div.content > ul > li:nth-child(1) > b)"). Neither of them worked.
I tried to mark it with an ID and made only one "li" exists. The CSS selector worked all right. But when I clicked the deleteIcon$"(#deleteIcon)", nothing happened.
#deleteIcon{
float:right;
font-weight: bold;
padding: 0 3px 0 3px;
border-radius: 5px;
background: #ccc;
cursor: pointer;
margin-left: 5px;
font-size: 1.3em;
text-align: center;
}
I also tried to select my title. I found the following worked out.
$(".container h1").on("click", function () {
alert("Oh, no!");
return false;
});
I do not what to do now. Can anyone help me out here?
Thank you! I would be really appreciate if you can answer my question.
Adding more details:
I did actually add the deleteIcon into the HTML by JavaScript. I do not know whether this can have an effect on my selector.
Actual HTML
<main>
<div class="container">
<div class="tabs">
<p><span class="active">Newest</span></p><a href=""><p>
<span>Oldest</span></p></a><p><span>Add</span></p>
</div>
<div class="content">
</div>
</div>
</main>
JavaScript (The important part listed below)
function Item(name,dueDate,type){
this.name=name;//1
this.dueDate=dueDate;//input2
this.type=type;//3
};
$(".tabs a span").toArray().forEach(function (element) {
var $element = $(element);
// create a click handler for this element
$element.on("click", function () {
var $content,
$input,
$button,
i;
if ($element.parent().parent().is(":nth-child(1)")) {
// newest first, so we have to go through
// the array backwards
$content = $("<ul>");
for (i = Task.length-1; i >= 1; i--) {
// $buttondelete = $("<buttonDelete>").text("X");
var txt1 = Task[i].toStringName();
var txt2 = Task[i].toStringDate();
var txt3 = Task[i].toStringType();
//alert(txt3);
$content.append('<li> <span class="itemLeft">'+txt1+'</span> <span class="itemMiddle">'+txt2+'</span> <span class="itemRight">'+txt3+'</span><b class="deleteIcon"> X </b>');
}
}
$("main .content").append($content);
return false;
});
});

If you are creating the items inside ul dynamically you should bind the click event like this :
$(".content").on("click", ".deleteIcon", function()
{
alert("clicked") ;
return false;
}
) ;

The class selector starts with a . (just like the example you say you have that works).
Try
$(".deleteIcon").on("click", function () {
alert("Oh, clicked!");
return false;
});

Make div in div clickable with Javascript

Have a problem and can't get to solve it. Tried to use QuerySelectorAll and comma separating with GetElementsByClassName, but that didn't work, so I am wondering how to solve this problem.
I have this HTML:
<div class="area">Test title
<div class="some content" style="display: none">blablbala
<input></input>
</div>
<div class="two">This should be clickable too</div>
</div>
<div class="area">
Test title
<div class="some content">
blablbala
<input></input>
</div>
<div class="two">This should be clickable too</div>
</div>
JS:
function areaCollapse() {
var next = this.querySelector(".content");
if (this.classList.contains("open")) {
next.style.display = "none";
this.classList.remove("open");
} else {
next.style.display = "block";
this.classList.add("open");
}
}
var classname = document.getElementsByClassName("area");
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', areaCollapse, true);
}
http://jsfiddle.net/1BJK903/nb1ao39k/6/
CSS:
.two {
position: absolute;
top: 0;
}
So now, the div with classname "area" is clickable. I positioned the div with class "two" absolute and now the whole div is clickable, except where this other div is. If you click on the div with classname "two", it doesn't work (it does not collapse or open the contents). How can I make this work, without changing the structure?

One way is using a global handler, where you can handle more than one item by checking its id or class or some other property or attribute.
Below snippet finds the "area" div and pass it as a param to the areaCollapse function. It also check so it is only the two or the area div (colored lime/yellow) that was clicked before calling the areaCollapse.
Also the original code didn't have the "open" class already added to it (the second div group), which mean one need to click twice, so I change the areaCollapse function to check for the display property instead.
function areaCollapse(elem) {
var next = elem.querySelector(".content");
if (next.style.display != "none") {
next.style.display = "none";
} else {
next.style.display = "block";
}
}
window.addEventListener('click', function(e) {
//temp alert to check which element were clicked
//alert(e.target.className);
if (hasClass(e.target,"area")) {
areaCollapse(e.target);
} else {
//delete next line if all children are clickable
if (hasClass(e.target,"two")) {
var el = e.target;
while ((el = el.parentElement) && !hasClass(el,"area"));
if (targetInParent(e.target,el)) {
areaCollapse(el);
}
//delete next line if all children are clickable
}
}
});
function hasClass(elm,cln) {
return (" " + elm.className + " " ).indexOf( " "+cln+" " ) > -1;
}
function targetInParent(trg,pnt) {
return (trg === pnt) ? false : pnt.contains(trg);
}
.area {
background-color: lime;
}
.two {
background-color: yellow;
}
.area:hover, .two:hover {
background-color: green;
}
.some {
background-color: white;
}
.some:hover {
background-color: white;
}
<div class="area">Test title clickable 1
<div class="some content" style="display: none">blablbala NOT clickable 1
</div>
<div class="two">This should be clickable too 1</div>
</div>
<div class="area">Test title clickable 2
<div class="some content">blablbala NOT clickable 2
</div>
<div class="two">This should be clickable too 2</div>
</div>
<div class="other">This should NOT be clickable</div>

You need to find your two elements while you're binding classname, and bind that as well.
var classname = document.getElementsByClassName("area");
for(var i=0; i < classname.length; i++){
classname[i].addEventListener('click', areaCollapse, true);
var twoEl = classname[i].getElementsByClassName("two")[0];
twoEl.addEventListener('click', function(e) { console.log('two clicked'); });
}

If you want to use jQuery:
$('.two').click(function(){
//action here
});