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;
};
Related
I wanna get the text on an element using family properties with javascript function, one of these (firstChild, nextSibling , parent...)
i click on button .
get the text from the <a>Hello</a> element which is
Hello
store the text on a variable
<div class="swiper-slide">
<i class="fa-regular fa-pen-to-square" id="update_pen" onclick="update_function()"></i> <--- click here
<div class="services-item mb-40 elementor-repeater-item-78d8e80" id="swiper-slide-one">
<div class="services-item__content">
<h4 class="services-item__tp-title mb-30">
Hello <---- this text
</h4>
<div class="text_area_box" id="text_area_box">
<input type="text" name="" required="">
<label>Titre</label>
</div>
</div>
</div>
</div>
Use addEventListener() to bind your handler so that you can get a reference to the element from the Event that's raised, not an outdated onclick attribute.
Use closest() to get the nearest .swiper-slide element.
Use querySelector() to get the child a element.
Read its textContent
Also, given the context and purpose of the question, I assume the HTML structure is repeated multiple times. As such you need to remove the id attributes from all elements that are repeated as id must be unique within the DOM.
document.querySelectorAll('i.button').forEach(el => {
el.addEventListener('click', e => {
const parent = e.target.closest('.swiper-slide');
const text = parent.querySelector('a').textContent;
console.log(text);
const input = parent.querySelector('input');
input.value = text;
});
});
<div class="swiper-slide">
<i class="button fa-regular fa-pen-to-square">Click</i>
<div class="services-item mb-40 elementor-repeater-item-78d8e80">
<div class="services-item__content">
<h4 class="services-item__tp-title mb-30">
Hello
</h4>
<div class="text_area_box">
<input type="text" name="" required="" />
<label>Titre</label>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<i class="button fa-regular fa-pen-to-square">Click</i>
<div class="services-item mb-40 elementor-repeater-item-78d8e80">
<div class="services-item__content">
<h4 class="services-item__tp-title mb-30">
Goodbye
</h4>
<div class="text_area_box">
<input type="text" name="" required="" />
<label>Titre</label>
</div>
</div>
</div>
</div>
You can give an id to the element you want to store:
<a id="hello" href="service-details.html">Hello</a>
Declare a variable const variable = ""
And then you can use
variable = document.getElementById("hello").innerHTML in your button function in order to store the contents
So as the question says, I am trying to hover the class button1 and get the id of 'css'. With my current code, all I get is the id html. I need to get a unique id that's pertinent to which button I hover. I'm still newer to jquery and javascript in general but I can't seem to find any information on this topic so any reference source would be great too if possible.
Here's my code:
HTML
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id = "css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
Jquery
('.button1').mouseover(function(event) {
$(".text").attr('id');
})
With your current code you get nothing, since .text does not have ID and result is never used. Use $(this).find('.Score').attr('id')[1].
Note few bug fixes:
('.button1').mouseover is missing $
You have nested .button1 (first one is not properly closed, use proper indentation for easier debugging), so it's impossible to find singe element, because you hover on top most element
$('.button1').mouseover(function(event) {
console.log($(this).find('.Score').attr('id'))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="html">10/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
<div class="button1">
<div class="text">
<p>Skill<br /> <span class="Score" id="css">9/10 </span> </p>
</div>
<div class="button1 Overlay">
</div>
</div>
Sorry for my bad English. I have a problem.
I have construction with button and list of span. I need then i click on item of list (some span), text of my button change on text clickable span.
If i click first span then my button change text on "Text" or second span "Text2".
<button class="switcher collapsible">X1</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text2</span>
</div>
I have many construction like this on my page. How i connect this for id? Then if i click on span with equal class, this is change all my buttons text?
Use div class with span to change text of button like below. In multi-pal case parent() and prev() is your friend.
$('.collapsibleContent').find('span').click(function(e) {
let txt = $(this).text();
$(this).parent().prev('.switcher').text(txt);
});
span {
color: red;
text-decoration: underline;
font-weight: bold;
}
<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>
Add click event for the class choise__block-item (all spans of class choise__block-item), get the text of clicked span using text() and set that text to the button.
$('span.choise__block-item').click(function () {
$('.switcher').text($(this).text())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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>
Also can see the reference of .html().
As par my understanding your requirement is to change text of button when clicked on span.
have a look below code
$('.collapsibleContent > span').click(function(){
var clickedTxt = $(this).text();
$(this).parents('.box').find('.switcher').text(clickedTxt);
});
.box{ width:300px; float:left; border:1px solid #ff0000; margin:5px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">
<button class="switcher collapsible">button1</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text2</span>
</div>
</div>
<div class="box">
<button class="switcher collapsible">button2</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text3</span>
<span class="choise__block-item">Text4</span>
<span class="choise__block-item">Text5</span>
</div>
</div>
<div class="box">
<button class="switcher collapsible">button3</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text6</span>
<span class="choise__block-item">Text7</span>
<span class="choise__block-item">Text8</span>
</div>
</div>
<div class="box">
<button class="switcher collapsible">X1</button>
<div class="collapsibleContent">
<span class="choise__block-item">Text</span>
<span class="choise__block-item">Text2</span>
</div>
</div>
You can get the list text using text() in jQuery:
$('.choise__block-item').click(function(e){
$('.switcher').text($(this).text())
})
<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>
repeat in my code
<div class="feed-element"ng-repeat="message in messages">
<a href="" class="pull-left">
<img alt="image" class="img-circle" src="{{message.src}}"onerror="this.src='https://cdn2.iconfinder.com/data/icons/transparent-round-icons/512/user.png';">
</a>
<div class="media-body ">
<small class="pull-right"></small>
<strong> {{message.User}} <br>
<small class="text-muted">{{message.Date}}</small>
<div class="well">
{{message.Question}}
</div>
<div class="pull-right">
<div class="well"style="display:{{message.isAnswered}}">{{message.Answer}}</div>
<div class="social-comment"style="display:{{message.isAnswered2}}">
<div class="media-body">
<textarea class="form-control" placeholder="Cevap YazΔ±n..."></textarea>
</div>
</div><br>
<a class="btn btn-xs btn-primary"style="display:{{message.isAnswered2}};width:150px;" ng-click="answer(message.Id)"><i class="fa fa-pencil"></i> Mesaj GΓΆnder</a>
</div>
</div>
</div>
In This code , every message has textarea and a button and every message is unique to any user so when I click one button I want to get text of that's item textarea only, But I couldn't do it how can I do it?
Thanks
Replace your textarea as below ,
yourtextareavalue should be your key name to bind values
<textarea class="form-control" ng-model="message.yourTextAreaValue"
placeholder="Cevap YazΔ±n..."></textarea>
I am trying to get product name in alert box when either image or link is clicked on product page. But there is also one buy now button available which is also currently giving the popup alert if it is clicked. I want to exclude it using jquery. Here is what I am going
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".item").click(function (event) {
var href = $('a', this).attr("href");
var target = $('a', this).attr("target");
var text = $(this).find('.product-name').text();
event.preventDefault();
alert(text);
setTimeout(function () {
window.open(href, (!target ? "_self" : target));
}, 300);
});
});
</script>
<li class="item">
<a href="product1.php" title="Sample Product Name" class="product-image">
<span class="sale-item">Sale!</span>
<div class="cat-mouseover"></div>
<img src="/images/product1.png" alt="Sample Product Name">
</a>
<h2 class="product-name">Sample Product Name</h2>
<div class="price-box">
<p class="old-price">
<span class="price-label">For:</span>
<span class="price" id="old-price-426"> 199,-</span>
</p>
<p class="special-price">
<span class="price-label"></span>
<span class="price" id="product-price-426"> Now 139,- </span>
</p>
</div>
<div class="actions">
<button type="button" title="Buy Now" class="button btn-cart" onclick="setLocation('/checkout/cart/add/uenc/aHR0cDovL3d3dy52aXRhLm5vLw,,/product/426/')"><span><span>Buy</span></span>
</button>
</div>
</li>
<li class="item">
<a href="product1.php" title="Sample Product Name" class="product-image">
<span class="sale-item">Sale!</span>
<div class="cat-mouseover"></div>
<img src="/images/product1.png" alt="Sample Product Name">
</a>
<h2 class="product-name">Sample Product Name</h2>
<div class="price-box">
<p class="old-price">
<span class="price-label">For:</span>
<span class="price" id="old-price-426"> 199,- </span>
</p>
<p class="special-price">
<span class="price-label"></span>
<span class="price" id="product-price-426"> Now 139,- </span>
</p>
</div>
<div class="actions">
<button type="button" title="Buy Now" class="button btn-cart" onclick="setLocation('/checkout/cart/add/uenc/aHR0cDovL3d3dy52aXRhLm5vLw,,/product/426/')"><span><span>Buy</span></span>
</button>
</div>
</li>
http://jsfiddle.net/585BC/
Please advise.
Put this at the top of your callback:
if ($(event.target).hasClass("btn-cart") || $(event.target).parents(".btn-cart").length !== 0) {
return;
}
Now if the "event.target" (= where the click occured) has the class "btn-cart" or is a child of this "btn-cart", then the execution of your callback returns.
See updated fiddle: http://jsfiddle.net/585BC/2/
Just exit the event handler if you click the button:
if(($(event.target).is('.button.btn-cart')) return;
// rest of your code goes here