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>
Related
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 a script which calls and displays the users phone number to them on a header. That works great. However, I am needing to change text on the page that I can't edit directly. There is a phone number that I am needing to replace with the same ID as the header.
Help me change the href 800 number and the span 800 number with jQuery please! I'm stuck!
The code below is hard coded and I don't have access to change it. So it must be done dynamically.
<div class="flex-item flex-item-nogrow navbar-icon" id="navbarPhoneNumber">
<a href="tel:8005555555" class="flex-wrapper align-items-center navbar-icon-link">
<i class="fa fa-phone" aria-hidden="true"></i> <span>(800) 555-5555</span> </a>
</div>
I have tried this
$("#navbarPhoneNumber a").html("<i class='fa fa-phone' aria-hidden='true'></i><span id='phonenumber'></span>");
It didn't work.
$("#navbarPhoneNumber a").replaceWith("<i class='fa fa-phone' aria-hidden='true'></i><span id='phonenumber'></span>");
Try This
var $phoneNumberA = jQuery('#navbarPhoneNumber a');
var $phoneNumber = jQuery('#navbarPhoneNumber span');
$phoneNumberA.attr('href', $phoneNumberA.attr('href').replace(/(tel:...)/, 'tel:123'));
$phoneNumber.text($phoneNumber.text().replace(/\(.*\)/, '123'));
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"
This code will replace what is shown inside <button></button> with selected icon from dropdown list.
This works good, only problem is that after clicking on selected element, icon inside that element will for some reason disappear? Why does this happen? I want <li> to be unchanged
http://codepen.io/filaret/pen/PGJEAL
HTML:
<div class="input-group-btn">
<button type="button" class="btn" data-toggle="dropdown">
<i class="fa fa-book"></i>
</button>
<ul class="dropdown-menu">
<li><i class="fa fa-book"></i> Something 111</li>
<li><i class="fa fa-newspaper-o"></i> Something 2222</li>
</ul>
</div>
jQuery:
var $selectWrapper = $('.input-group-btn');
$selectWrapper.find(".dropdown-menu li").click(function() {
// Get <i class="fa"></i>
var $selectedIcon = $(this).find('.fa');
// Put it inside <button></button>
$selectWrapper.find(".btn").html($selectedIcon);
});
You need to clone the icon using clone() like following
var $selectedIcon = $(this).find('.fa').clone();
instead of
var $selectedIcon = $(this).find('.fa');
UPDATED CODEPEN
Otherwise since you have i tag in dropdown and button tag and that only class change, why don't you just copy the class, it's more efficient, faster and easy to understand in your code.
jQuery(document).ready(function($) {
"use strict";
var $selectWrapper = $('.input-group-btn');
var $buttonIcon = $('.btn i');
$selectWrapper.find(".dropdown-menu li").click(function() {
// Get <i class="fa"></i>
var $selectedIcon = $(this).find('.fa');
// get icon classes
var classes = $selectedIcon.attr("class");
// Put the class in the button i tag
$buttonIcon.attr('class', classes);
});
});
See code pen: http://codepen.io/anon/pen/ORxQPZ
I have this anchor tag defined:
<a ng-disabled='placeOrderDisabled()' href='#Url.Action("Order","ShoppingCart")?deliveryMethod={{deliveryMethod}}' class="btn btn-primary">
{{ placeOrderButtonText }} <i class="fa fa-chevron-right"></i>
</a>
In Firefox and Chrome, the anchor tag is still clickable though, and I understand from other answers that this is by design, and I need to use a button instead.
Please advise how I need to refactor the above code to use a button element since the button element cannot have the href attribute.
You could try this:
<button class="btn btn-primary" ng-disabled="placeOrderDisabled()" ng-click="clickFn()">
<i class="fa fa-chevron-right"></i>
</button>
on JS file. I assume #Url.Action is object function inside the controller.
$scope.clickFn = function () {
var url = $scope.Url.Action('Order','ShoppingCart') + '?deliveryMethod=' + $scope.deliveryMethod;
window.location.href = url;
}
Don't refactor your code. You can still achieve the disabled behavior with the anchor tag using the CSS.
a.disabled, a[disabled] {
pointer-events: none;
}
From the docs:
The CSS property pointer-events allows authors to control under what
circumstances (if any) a particular graphic element can become the
target of mouse events. When this property is unspecified, the same
characteristics of the visiblePainted value apply to SVG content.
See a working example below:
var app = angular.module("sa", []);
a.disabled,
a[disabled] {
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div ng-app="sa" ng-init="disableButton = false">
<a ng-disabled='disableButton' href="" class="btn btn-primary">
I'm an anchor button <i class="fa fa-chevron-right"></i>
</a>
Disable the anchor button
</div>