Develop Reference

Hide and Show balance with icon click JavaScript

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>

GTM Custom Javascript Variable not working (return function)

I've been looking at this for days now and am totally stuck. The page I am working with looks like this:
<div class="field--item">
<span class="file file--mime-application-pdf file--application-pdf icon-before">
<div class="file-info text-center--mobile"><span class="file-icon"><span class="icon glyphicon glyphicon-file text-primary" aria-hidden="true"></span></span><div class="file-wrapper"><span class="file-name">17840.pdf</span><span class="file-size">94.35 KB</span></div></div>
<span class="file-link">Download
</span></span></div>
The custom variable that I set up looks like this:
function() {
return document.getElementsByClassName('resource-button')[0].getAttribute('resource-name').text();
}
What I really want to do is set up a variable that pulls in the resource name, when the Download button is clicked. I know to set up the actual click tracking etc. separately, I just can't get this function to pull through anything to the variable other than 'defined'.
Any help or a nod in the right direction would be sooo very much appreciated. Thanks!

Try removing the text() function at the end:
function getAttribute() {
return document.getElementsByClassName('resource-button')[0].getAttribute('resource-name');
}
console.log(getAttribute());
<div class="field--item">
<span class="file file--mime-application-pdf file--application-pdf icon-before">
<div class="file-info text-center--mobile"><span class="file-icon"><span class="icon glyphicon glyphicon-file text-primary" aria-hidden="true"></span></span><div class="file-wrapper"><span class="file-name">17840.pdf</span><span class="file-size">94.35 KB</span></div></div>
<span class="file-link">Download
</span></span></div>

perhaps you can use a click event:
Download
<script>
function myFunction(elem) {
var yourAttribute = elem.getAttribute('yourAttribute');
}
</script>

Font Awesome not working with javascript set value

Font awesome is not working for me when I try to change the value of an element using a javascript.
Javascript:
function onClick() {
document.getElementById("dicebutton").value='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
}
HTML code for button:
<form>
Bet<br>
<input type="text" name="bet"><br>
Chance<br>
<input type="text" name="chance"><br>
<h3>Payout: 0.0000BTC</h3>
<input value = "Roll dice" id="dicebutton" onClick="onClick()" type="button" style="vertical-align:middle"></input>
</form>
Result:
Notice how the green button spits raw HTML while the top of the website correctly displays the fonts? How can I fix this?

Use the element.innerHTML = content; syntax if you want to add HTML. ".value" only passes data as a string.
So
document.getElementById("dicebutton").innerHTML='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
Edit:
I just realized you are using an < input > field for your button. This wont work in that case. The only value for an < input > field that you can use to change the button text is value= as you tried. Unfortunately "value" treats anything assigned to it as a string.
Instead of an < input > field, you will need to use an element that you can attach HTML to - for example, an < a > tag, a < button > tag, or simply using a styled div as a button. This will allow you to pass the HTML to it without having to use "value".

Use a <button> tag instead of <input> and change
document.getElementById("dicebutton").value
to
document.getElementById("dicebutton").innerHTML

You must use button instead of input button, then update the content with innerHTML.
Example:
Javascript:
function onClick() {
// you can you "this.innerHTML" too
document.getElementById("dicebutton").innerHTML='Rolling <i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>';
}
HTML:
<button id="dicebutton" onclick="onClick()" style="vertical-align:middle">Roll dice</button>

Send value from input via url PHP - JS

I want to send the value of one input text by a link to make and insert in other page. I don't wanna use a submit type because these elements are inside a form with submit for another page.
This is my code of devices_insert.php:
<div class="cp_oculta" id="plus1" name="new_fabricant">
<input type="text" id="add_fabricant" name="add_fabricant" placeholder="New Fabricant">
<a href="fabricants_insert.proc.php?link=<?php echo **SOLUTION** ?>" onclick="valor()">
<i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i>
</a>
</div>
I can get the value with a function but I don't know how to send it via url.
<script>
function valor(){
var bla = $('#add_fabricant').val();
}
</script>
And I pretend to send to fabricants.insert.proc.php for make the insert:
<?php
$sql_insert = "INSERT INTO Property (PRP_PRP_TYP_Id, PRP_Value) VALUES ('2', '$_REQUEST[**SOLUTION**]')";
echo($sql_insert);
?>
I have checked before many solutions in stackoverflow but I think are not useful for my case.

I suggest you to use ajax, e.g.:
<script>
$('#add_fabricant').on('blur', function(){
$.post(url, {
'SOLUTION': $(this).val()
}).done(function(rst){
//to do
})
})
</script>

I have solved the problem in a easy way:
<script>
function valor(){
$('#fabricant_link').attr('href', 'fabricants_insert.proc.php?new='+$('#add_fabricant').val());
}
</script>
Now with this script send the variable with the url and I can receive it in the other page (fabricants_insert.proc.php) for insert in the database.
<div class="cp_oculta" id="plus1" name="new_fabricant">
<input type="text" id="add_fabricant" name="add_fabricant" placeholder="New Fabricant">
<a onclick="valor()" id="fabricant_link">
<i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i>
</a>
</div>
I only need to add an id to the link to use the function.

ng-hide show on-click event in AngularJS

I have in my index.html a div which initially must be hidden:
<div class="autocomplete" ng-show="div_show" ng-controller="SearchController">
And I need when I click on my Menu on the search link,the div to be shown,basically
ng-show="true"
So on my link I defined something like that:
<a class="list-group-item" ng-click="show()"><i class="fa fa-search fa-fw"></i> Search</a>
And in my controller the function :
$scope.div_show = false;
$scope.show =function(){
$scope.div_show = true;
console.log($scope.div_show);
alert($scope.div_show);
}
When I click on the link I have the alert value set to 'true'but the div is still hidden,
Any suggestions? Thank you!!!

To toggle the ng-show element, just assign the following directive on the Menu button:
ng-click="div_show = !div_show"
All this does is toggles the value of div_show between true and false.
Here's a plunker for a full demo.

Try something like this :
<a href="#" class="list-group-item" ng-click="div_show = true">
<i class="fa fa-search fa-fw"></i> Search
</a>
This will make sure the page is not getting loaded again and i will set the div_show to be true, only if it is in the scope.