Develop Reference

Click smiley and place in input field

How can I click on a smiley / emoji from a list and place it in a input field? I can see in the Inspect Element Q (console log) that it is being clicked but I can not find a way to copy it to the input field.
HTML
<div id="wrapper">
<div class="bubble-container" ></div>
</div>
<div class="emoji" onclick="javascript:smileySelect(event);">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes"> 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
JAVASCRIPT
function smileySelect(event) {
// get selected item and place it in input field
};

You can get the clicked emoticon with event.target and add the textContent of that to the value of the input element.
I also added a check event.target != event.currentTarget to avoid all icons are inserted when you click on the parent but not on a child (emoticon). When your html content of the event handler gets more complicated then you probably want to add a class to all emoticon spans and check if the clicked element has that class.
function smileySelect(event) {
/*
event.target = the actually clicked element
event.currentTarget = the element that has the event handler
When they are not equal we know the click was on a child of the .emoji element.
Any child is valid since you only have the emoticon span elements inside the .emoji element.
*/
if (event.target != event.currentTarget) {
let smiley = event.target;
document.querySelector('#text').value += smiley.textContent;
}
};
<div id="wrapper">
<div class="bubble-container"></div>
</div>
<div class="emoji" onclick="javascript:smileySelect(event);">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes"> 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>

You can try something like:-
<div id="wrapper">
<div class="bubble-container" ></div>
</div>
<div class="emoji" onclick="smileySelect(event.target.innerHTML)">
<span title="Happy Face"> 😀 </span>
<span title="Grinning Face"> 😃 </span>
<span title="Grinning Face with Smiling Eyes" > 😄 </span>
</div>
<div id="sendCtrls">
<input type="text" placeholder="Your message here" id="text">
<button id="myBtn" style="width: auto;"> Send </button>
<span title="Emoji" onclick="javascript:smiliesSH();"> 😃</span>
</div>
JAVASCRIPT
function smileySelect(emoji) {
if (emoji.includes("span") == false)
document.getElementById("text").value += emoji;
};

jquery selector not working on a dynamic value

For some reason my jQuery function is not working on a dynamic value.
I'm trying to show/hide content ("item-content") when the user clicks on the span "Click here".
If I use not nested HTML, everything works fine, but for some reason, my function breaks when I use nested HTML.
$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
e.preventDefault();
$(this).next('.main .child span.item-content').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>

.next looks for the next sibling, so in your code you don't need to specify the class of what you're looking for as you're just getting the span sibling, which is .item-content.
Working example:
$('.item-content').hide();
$(document).on('click','.main .child span.item-title', function(e){
e.preventDefault();
$(this).next().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>

The selector you are toggling is incorrect, as it is looking for a span called 'item-content'. It should be:
$(this).next('.main .child div.item-content').toggle();

First of all make sure that the jQuery cdn library is initiated before the custom script on your page.
There are two ways to hide components by css and jquery both. I'm posting the css script too and it's better to hide using css.
Also there is no need for specifying the classes from top inside the click event for toggle, the next() function basically lookup for the next html component.
$('.item-content').hide(); // if using css to hide than this line is not required
$(document).on('click', '.item-title', function(){
$(this).next().toggle();
});
.item-content {
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div class="main">
<div class="child">
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
1
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
2
</div>
</div>
</div>
<div class="child">>
<span class="item-title" style="cursor:pointer">
Click here
</span>
<div class="item-content">
<div class="item-body">
3
</div>
</div>
</div>
</div>

How I can display concatenation of many strings with ajax? (or not)

I have span with some text. I need then <span class="switcher__result"> default is display: none but if my <button class="switcher switcher__Last collapsible"> change the text, my result span is display: block and text of my span is concatenation text of all my <button class="switcher switcher__Last collapsible">
<button class="switcher switcher__Last collapsible">X1</button>
<button class="switcher switcher__Last collapsible">X2</button>
<button class="switcher switcher__Last collapsible">X3</button>
<button class="switcher switcher__Last collapsible">X4</button>
<span class="switcher__result">X1 X2 X3 X4</span>
This script changing text from buttons.
$('.collapsibleContent').find('span').click(function (e) {
let txt = $(this).text().split('-')[0];
$(this).parent().prev('.switcher').text(txt + '\u00A0');
});
How can I make script for <span class="switcher__result">X1 X2 X3 X4</span>.
<button class="switcher switcher__Last collapsible">X1</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text</span>
</div>
<button class="switcher switcher__Last collapsible">X2</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text</span>
</div>

Here you go. Check length for span text and concat your string and display result on span tag.
$('.collapsibleContent').find('span').click(function(e) {
let txt = $(this).text();
$(this).parent().prev('.switcher').text(txt);
$('.result').show();
if ($('.result').html().length > 0) {
txt = $('.result').text() + ', ' + txt;
$('.result').text(txt);
}
$('.result').text(txt);
});
span {
color: red;
text-decoration: underline;
font-weight: bold;
}
.result {
display: none;
color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="switcher collapsible">X1</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text2</span>
</div>
<button class="switcher collapsible">X2</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text3</span>
<span class="choise__block-item">Text4</span>
</div>
Result:<span class='result'></span>

Change class with JQuery to all items with same class

I have a bunch of checkboxes with the same structure, but they are spans, not selects, so the way they appear to be checked is by adding a class.
<div class="mod_6">
<div class="checkbox-wrapper">
<span class="checkbox" id="AllColors"></span>
<span>All</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox checked"></span>
<span>Blue</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Black</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Red</span>
</div>
</div>
This is my JS:
function CheckBox() {
$(".checkbox").click(function () {
if ($(this).hasClass('checked')) {
$(this).removeClass('checked');
} else {
$(this).addClass('checked');
}
});
};
What I want is, if I click on a specific checkbox, in this case, the one that says 'All' (I assume I should give it an id), I want all the items with the checkbox to be modified and added the class 'checked'. I don't know how to find them as they are in different divs.
What I have tried unsuccessfully is to use find() and then addClass():
$("#allColors").click(function () {
$.each('.checkbox-wrapper').find('.checkbox').addClass('checked');
})
Thank you :)

You can just make it like this if I remember correctly:
$('#AllColors').click(function(){
$('.checkbox-wrapper > .checkbox').addClass('checked')
})

I think you are looking for this with toggleClass():
$("#AllColors").click(function (){
$(".checkbox").toggleClass('checked');
});
.checked{
border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mod_6">
<div class="checkbox-wrapper">
<span class="checkbox" id="AllColors">All</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox checked"></span>
<span>Blue</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Black</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Red</span>
</div>
</div>
Or with addClass():
$("#AllColors").click(function (){
$(".checkbox").addClass('checked');
});
.checked{
border: 2px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mod_6">
<div class="checkbox-wrapper">
<span class="checkbox" id="AllColors">All</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox checked"></span>
<span>Blue</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Black</span>
</div>
<div class="checkbox-wrapper">
<span class="checkbox"></span>
<span>Red</span>
</div>
</div>

There are some issues here:
you are using #allColors instead of #AllColors
you are using each in the wrong way
better use on() instead of click()
use this instead:
$("#AllColors").on('click', function(){
$('.checkbox-wrapper').each(function(){
$(this).find('.checkbox').addClass('checked')
})
})

Get text from <span> on click

When the like button div is clicked I am trying to get the content from its span. I know I need to use .text() but im having trouble selecting the corresponding span for each div.
$(".like").click(function(event){
event.stopPropagation();
$("i", this).toggleClass("icon-thumbs-up-alt").toggleClass("icon icon-thumbs-up");
console.log($('.hideThis').text());
});
returns the string in each span. Do I need to use "this" somewhere?
<div class= "postInfo1>
<span class="hideThis" style="display:"none">3453652545</span>
</div
<div class="like">Like Button</div>
<div class= "postInfo2>
<span class="hideThis" style="display:"none">3453652545</span>
</div
<div class="like">Like Button</div>
<div class= "postInfo3">
<span class="hideThis" style="display:"none">3453652545</span>
</div
<div class="like">Like Button</div>

Yes and try this:
$(".like").click(function(event){
event.stopPropagation();
$("i", this).toggleClass("icon-thumbs-up-alt").toggleClass("icon icon-thumbs-up");
console.log($(this).prev('div').find('.hideThis').text()); //Find the previous div relative to the clicked span and insisde that find hideThis
});
And remember to close your div, qoutes after the classname postInfo1 and remove quotes in the style value style="display:"none";
Demo

Do I need to use "this" somewhere?
Yes, so you can traverse the DOM having this (the clicked element) as the starting point:
$('.like').click(function(event) {
//...
console.log( $(this).prev().find('.hideThis').text() );
});

You need to do it this way -
Demo ------> http://jsfiddle.net/v4mew/
$(".like").click(function(event){
event.stopPropagation();
$("i", this).toggleClass("icon-thumbs-up-alt").toggleClass("icon icon-thumbs-up");
console.log($(this).prev('div').find('.hideThis').text());
});
Corrected markup -
<div class="postInfo1"> <span class="hideThis" style="display:none">3453652545</span>
</div>
<div class="like">Like Button</div>
<div class="postInfo2"> <span class="hideThis" style="display: none">3453652545</span>
</div>
<div class="like ">Like Button</div>
<div class="postInfo3"> <span class="hideThis" style="display: none">3453652545</span>
</div>
<div class="like ">Like Button</div>

Your markup is all jacked up. You have strings and tags that aren't closed.
I cleaned it up for you
<div class="postInfo1"> <span class="hideThis" style="display:none">3453652545</span>
</div>
<div class="like">Like Button</div>
<div class="postInfo2"> <span class="hideThis" style="display:none">3453652545</span>
</div>
<div class="like">Like Button</div>
<div class="postInfo3"> <span class="hideThis" style="display:none">3453652545</span>
</div>
<div class="like">Like Button</div>