Hello I am trying to make changes to the below HTML code textContent however it includes a <i> tag in it so how can I change the textContent? How do I edit the HTML tag in the script to keep the <i> tag class but change only the text that is in it?
This is how the default HTML look like
This is what it looks like after I edited it
HTML Code
<a id="notificationUnread" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 0 unread notifications
</a>
Script
var notificationUnread = document.getElementById('notificationUnread').textContent = "TEST"
You can target the last text node using lastChild or childNodes[lastIndex] and change its value using node.nodeValue="Something"
document.getElementById("notificationUnread").lastChild.nodeValue="Test"
or
let nodes=document.getElementById('notificationUnread').childNodes
nodes[nodes.length-1].nodeValue= "TES"
//let nodes=document.getElementById('notificationUnread').childNodes
//nodes[nodes.length-1].nodeValue= "TES"
//Without span
document.getElementById("notificationUnread").lastChild.nodeValue="Test Without span"
//With span
document.querySelector("#notificationUnread2 > .text-notification").innerText="Test with span"
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!--without span -->
<a id="notificationUnread" class="dropdown-item">
<i class="fas fa-bell mr-2"></i> 0 unread notifications
</a>
<br>
<!--with span -->
<a id="notificationUnread2" class="dropdown-item">
<i class="fas fa-bell mr-2"></i>
<span class="text-notification">0 unread notifications</span>
</a>
If you want to change the html inside your a tag, use this:
var notificationUnread = document.getElementById('notificationUnread').innerHTML = "your html here";
otherwise you can change the text only with replacing innerHTML to innerText
How about wrapping the text you want to change in a <span>
<a id="notificationUnread" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> <span class="link-text">0 unread notifications<span>
</a>
document.querySelector('#notificationUnread .link-text').innerText = "TEST"
Related
Please I need help with this JavaScript code, this is what I want it to look like, the balance will be visible and the icon will show as a show icon, and when it is clicked on, the icon will switch to a hide icon and the balance will become password format...
Here is my code below:
function changeIcon(anchor) {
var icon = anchor.querySelector("i");
icon.classList.toggle('bx-show');
icon.classList.toggle('bx-hide');
anchor.querySelector("span").textContent = icon.classList.contains('bx-show') ? "Read more" : anchor.querySelector("span");
}
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<a onclick="changeIcon(this)" id="myBtn">
<i id="faPlus" class='bx bx-show'></i>
<span class="SPN">Balance: $56,756.00</span>
</a>
This is the result, at the first the balance will be visible but when click to hide and click to show the balance again will not be visible, this is what I got as result below:
[object HTMLSpanElement]
Thanks
You need the textContent of the span, but then it is gone after you replace it.
I also swapped the test since you had to click twice on the eye
I suggest you use a data attribute (or toggle two spans, the read and the balance)
If you have more than one, we need to delegate (see further down)
function changeIcon(anchor) {
var icon = anchor.querySelector("i");
icon.classList.toggle('bx-show');
icon.classList.toggle('bx-hide');
anchor.querySelector("span").textContent = icon.matches('.bx-hide') ? "Read more" : anchor.querySelector("span").dataset.text;
}
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<a onclick="changeIcon(this)" id="myBtn">
<i id="faPlus" class='bx bx-show'></i>
<span class="SPN" data-text="Balance: $56,756.00">Balance: $56,756.00</span>
</a>
More than one element:
document.getElementById("balances").addEventListener("click",function(e) {
const tgt = e.target.closest("a"); // wee can click anywhere in the anchor
if (!tgt.matches(".myBtn")) return // not a button
const icon = tgt.querySelector("i");
const span = tgt.querySelector("span");
icon.classList.toggle('bx-show');
icon.classList.toggle('bx-hide');
span.textContent = icon.matches('.bx-hide') ? "Read more" : span.dataset.text;
})
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<div id="balances">
<a class="myBtn">
<i class='bx bx-show'></i>
<span class="SPN" data-text="Balance: $56,756.00">Balance: $56,756.00</span>
</a>
<hr/>
<a class="myBtn">
<i class='bx bx-show'></i>
<span class="SPN" data-text="Balance: $55,756.00">Balance: $55,756.00</span>
</a>
</div>
Your result isn't working, because you try to set the TextContent of your SPAN-Element to the entire Element itself.
Firstly, you should store the Balance in a separate variable or preferably as a data-attribute for the specific element to access it at any time, cause if you change the TextContent, your Balance value is replace by your "Read more"-String and the original value is gone.
I would oppose the following changes:
Store the balance in a separate value, to access the value if you want to show the balance again, if it was hidden before.
You need to change the ternary-operator a little
Ive edited your source code below with comments:
function changeIcon(anchor) {
var icon = anchor.querySelector("i");
icon.classList.toggle('bx-show');
icon.classList.toggle('bx-hide');
// Changed the falsy state of the ternary operator to return the balance value
anchor.querySelector("span").textContent = icon.classList.contains('bx-show') ? "Read more" : anchor.querySelector("span").dataset.value;
}
<link href='https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css' rel='stylesheet'>
<a onclick="changeIcon(this)" id="myBtn">
<i id="faPlus" class='bx bx-show'></i>
<!-- In php the line would be:
<span class="SPN" data-value="<?php echo $x; ?>"><?php echo $x; ?></span> -->
<span class="SPN" data-value="Balance: $56,756.00">Balance: $56,756.00</span>
</a>
I'm trying to use Font Awsome in my web poject,
I've added the link:
<script src="https://use.fontawesome.com/bedf006dec.js"></script>
When I add font awesome directly to my HTML like this:
<div class="topbar">
<div class="topbar__elements container">
<div class="topbar__left">
<a href="#">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span> Middle East Airlines Ground Handling</span>
</a>
<a href="mailto:meag#meag.com.lb" target="_top" rel="noopener noreferrer">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span> meag#meag.com.lb</span>
</a>
<a href="tel:00961 1 622700">
<i class="fa fa-phone" aria-hidden="true"></i>
<span> +961 1 622700</span>
</a>
</div>
<div class="topbar__right">
Career
Contact Us
</div>
</div>
</div>
It works fine:
I'm also using tiny slider and I want to change the text of the previous and next buttons to have Font Awsome icons, I know that I can create custom buttons with tiny slider directly in the HTML code but I'm trying to use the default controls of tiny slider, therefore to try and change the text of these 2 buttons I'm using javascript:
const prevBtn = document.querySelector(".tns-controls").firstChild;
const nextBtn = document.querySelector(".tns-controls").lastChild;
prevBtn.innerHTML = "<i class='fa-solid fa-angle-left' aria-hidden='true'></i>";
nextBtn.innerHTML = '<i class="fa-solid fa-angle-right" aria-hidden="true"></i>';
But it doesn't work and give me this:
Even though when I open the developer tools it looks like as if it worked.
I have attached the java Script file in body section of the page but its still not working.
Here is #javascript function that i want to call
function opentab(evt, tab) {
var i, content, links;
content = document.getElementsByClassName("main");
for(i = 0;i < content.length;i++){
content[i].display="none";
}
links=document.getElementsByClassName("linked");
for(i=0; i < links.length;i++){
links[i].className=links[i].className.replace("active", "");
}
window.document.getElementById(tab).style.display = "block";
evt.currentTarget.className += " active";
}
This is the #HTML code i want to call the above method onclick of <a> tag to show the specific div.
<div class="sidebar">
<img src="PNG%20WE%20Carry%20Fast-01.png" alt="Logo">
<a href="#" onclick='opentab(event, 'home')' class="linked" ><i class="fas fa-home" ></i>
Home </a>
<a href="#" onclick='opentab(event, 'routes')' class="linked" >
<i class="fas fa-route"></i> Routes</a>
<a href="#" onclick='opentab(event, 'vehicles')' class="linked" ><i class="fas fa-truck-moving"></i>
Vehicles</a>
</i> Qr Code
</i> Order Status
<a href="#" onclick='opentab(event, 'Report')' class="linked" ><i class="fas fa-chart-bar"></i>
Report</a>
</div>
<div id="home" class="main">
<h1>Hi welcome to your home page
</h1>
</div>
onclick='opentab(event, 'OrderStatus')' would not execute because of incorrectly nested quotes.
Try onclick="opentab(event, 'OrderStatus')"
so that the inside quotes '' are not in conflict with the outside double quotes ""
Also there is no display property associated with a division. What you are trying to achieve is to set the style property.
content[i].style.display = "none";
A demo of my dilemma here
Let's say I have the following html:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<body>
<div class="main" id="thingSection">
<h1>
Test Header
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content1">
Some content
</div>
</div>
<hr />
<div class="main" id="thingSection1">
<h1>
Another Test
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content2">
Some content
</div>
</div>
<hr>
<div class="main" id="thingSection2">
<h1>
Another test, you say?
</h1>
<button class="btn-icon"><i class="fa fa-fw fa-lg fa-windows"></i> <i class="fa fa-fw fa-lg fa-toggle-off"></i> <i class="fa fa-fw fa-lg fa-apple"></i></button>
<div class="content" id="content3">
Some content
</div>
</div>
</body>
</html>
I am using the following jquery to change the toggle icon from FontAwesome from off to on:
$(function() {
$('.btn-icon').click(function() {
if ($(this).find($(".fa")).hasClass('fa-toggle-off')) {
$("i.fa-toggle-off").toggleClass('fa-toggle-on');
} else {
$("i.fa-toggle-on").toggleClass('fa-toggle-off');
}
});
});
When I click the button to toggle the icon, it works as expected, i.e. it changes all of the buttons on the page. However, I would like to dynamically determine which button has been pressed, and then change the content of a child div based on the position of the switch.
I want to avoid hardcoding id's for each button to avoid a ton of if/else statements in the script that must be updated each time I, say, add a new button or a new section. That is to say, I want to dynamically detect which button has been pressed, and affect only that button and its children.
I've noticed that console.log(this) yields only the HTML for the particular button that has been pressed, not all of the buttons.
I'm a novice with jquery. I haven't been able to find a solution to this problem yet, and I feel like there has to be a way to do this dynamically without hardcoding IDs.
EDIT: I've accomplished (partially) what I want to do with the following code:
$(function() {
$('.btn-icon').click(function() {
var t = $(this).find('.is-toggle');
if (t.hasClass('fa-toggle-off')) {
t.addClass('fa-toggle-on');
t.removeClass('fa-toggle-off');
}
else {
t.addClass('fa-toggle-off');
t.removeClass('fa-toggle-on');
}
});
});
Looks like I just didn't understand what exactly $(this) was (:
All you need is $(this) that selects the element that triggered the event. From there you can select down to the div you want.
EDIT: Here is how that might look in code, I pulled this from your fiddle and edited it
$(function() {
$('.btn-icon').click(function() {
$(this).children('.fa-toggle-off, .fa-toggle-on').toggleClass('fa-toggle-on fa-toggle-off');
});
});
HTML of that part is:
<div class="review-small-text">
<span class="stars-rate">
<span property="starsRating">
<i class="fa fa-star-yellow fa-star"></i>
<i class="fa fa-star-yellow fa-star"></i>
<i class="fa fa-star-yellow fa-star"></i>
<i class="fa fa-star-yellow fa-star"></i>
<i class="fa fa-star-yellow fa-star"></i>
</span>
</span>
<span property="reviewRating" typeof="Rating" style="display:none;">
<span property="ratingValue">5</span>
<span property="bestRating">5</span>
<span property="worstRating">0</span>
</span>
<span property="itemReviewed" typeof="Service" class="">Liposuction</span> </div>
I'm trying to extract the second span's ratingValue of a particular review using selenium and i tried to extract that value by using this css selector:
'div.review-small-text>span:nth-of-type(2)>span:nth-of-type(1)'
but it is giving me an empty string.
have also tried this one
'div.review-small-text>span:nth-child(2)>span:nth-child(1)'
so I think the problem is not in the css-selector. Display none is creating an issue here.
Is there any possible way to extract that value?
Python source code that i have tried so far is:
from selenium import webdriver
import time
url = "myurlhere"
driver = webdriver.Chrome()
driver.get(url)
time.sleep(3)
all_reviews_listings = driver.find_elements_by_xpath("//div[#id='tab_reviews']/div[#class='provider_all_Reviews']/div[#id='pnlReviews']/div")
for review in all_reviews_listings:
review_rating = review.find_element_by_css_selector('div.review-small-text>span:nth-of-type(2)>span:nth-of-type(1)').text
print("Review Rating: ", review_rating)
Here is the css to get the ratingValue.
Using JavaScript:
review_rating = driver.execute_script("""return document.querySelector(".review-small-text > span[property='reviewRating'] > span[property='ratingValue']").textContent""")
Without JavaScript: Alternatively you can also do this.
driver.find_element_by_css_selector(".review-small-text > span:nth-child(2) > span[property='ratingValue']").get_attribute("textContent")
The ancestor tag is having the attribute style="display:none;, so to extract all the reviewRatings you can use the following solution:
driver.execute_script("arguments[0].removeAttribute('style')", driver.find_element_by_css_selector("div.review-small-text span[property='reviewRating'][typeof='Rating']"))
print([element.text for element in driver.find_elements_css_selector("div.review-small-text span[property='reviewRating'][typeof='Rating'] span")])