We Keep Coding

How to hide text/div and replace it with asterisks?

I need some help.. the idea behind this is like a simple toggle button that can hide the object and replacing the empty area with ****.
I was thinking it was more like in a Password form input where you can hide password by clicking the Eye icon. However, I needed something that are not required input form, something that is just simple DIV
function toggler(divId) {
$("#" + divId).toggle();
.css('content', 'sadas');
}
.hidden {
display:none;
}
this is a test
<div id="myContent" class='hidden'>
<div>this is a test #1 </div>
</div>
I can hide the DIV but leaving the empty area, how can I replace this empty area with ***** ??
example:
My balance is $200 [hide]
My balance is **** [show]
https://jsfiddle.net/qobgfLh6/

I have written a fiddle.
There are some points that can be better managed.
But I think you are looking for something like that.
The idea is to add another div with the **** placeholder and use toggleClass() function of jQuery.
$("#" + divId).toggleClass('hidden');
$("#myPlaceholder").toggleClass('hidden');
https://jsfiddle.net/qze8fydv/

Try to use something like this.
$(document).ready(function () {
function handle(input, toggler) {
var inputValue = ""
var shouldShowAsterisks = false
input.change(function () {
inputValue = $(this).val()
})
toggler.click(function () {
shouldShowAsterisks = !shouldShowAsterisks
shouldShowAsterisks
? input.val("*".repeat(inputValue.length))
: input.val(inputValue)
input.prop("disabled", shouldShowAsterisks)
})
}
handle($(".enter"), $(".toggler"))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="enter" />
<button class="toggler">Hide</button>

function toggleElementMask(element){
//Regex to find *
let reg = /^\*+$/g;
//If all * we are masked
let isMasked = element.innerText.match(reg);
if(!isMasked) {
//Store the original text
element.dataset.original = element.innerText;
//Replace the contente with the same amount of *
element.innerText = "*".repeat(element.innerText.length);
}else{
//Restore the text
element.innerText = element.dataset.original;
}
}
//Mask on page load
$(".masked").each(function(){
toggleElementMask(this);
});
//Click event handler
$(".toggleMask").on("click", function(e){
e.preventDefault();
toggleElementMask($($(this).attr("href"))[0]);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
this is a test
<div id="myContent" class='masked'>
<div>this is a test #1 </div>
</div>
this is a test
<div id="myContent2" class='masked'>
<div>Another one</div>
</div>
this is a test
<div id="myContent3" class='masked'>
<div>one with <span>a</span> span</div>
</div>

how to capture p elements value when click event happened using JavaScript

Here is my code. I want to capture Nebula and Price 1.44 when I click on button. Can anyone help me please.
Html code
<div class="item__top">
<p> Nebula</p>
<p>
Price<span class="big-price">1</span>.44
<span class="text-large">/mo</span>
</p>
<p>$2.88</p>
<button class="calculate-hosting">Get Started</button>
<p>You pay $17.28 — Renews at $33.88/year</p>
</div>
JS code
var calHosting = document.querySelectorAll('.calculate-hosting');
[...calHosting].forEach(cal=>{
cal.addEventListener('click',function(event){
document.getElementById('cal-container').style.display='block';
});
});
Note: I am dealing with mutiple buttons so thats why I sued querySelectorAll.

You can use this to refer to the button that was clicked, .parentElement to climb up, and then select paragraphs and their inner text. The text can be parsed however you like from there.
var calHosting = document.querySelectorAll('.calculate-hosting');
[...calHosting].forEach(cal => {
cal.addEventListener('click', function (event) {
var paragraphs = this.parentElement.querySelectorAll("p");
var p1 = paragraphs[0].innerText;
var p2 = paragraphs[1].innerText;
var price = Number(p2.match(/\d+\.\d+/)[0]);
console.log(p1); // Nebula
console.log(p2); // Price1.44 /mo
console.log(price); // 1.44
// document.getElementById('cal-container').style.display = 'block';
});
});
<div class="item__top">
<p> Nebula</p>
<p>
Price<span class="big-price">1</span>.44
<span class="text-large">/mo</span>
</p>
<p>$2.88</p>
<button class="calculate-hosting">Get Started</button>
<p>You pay $17.28 — Renews at $33.88/year</p>
</div>

Filter data in ng-repeat to display only the clicked item with Angularjs

Please help a little bit.
I have a list of 7 events displayed already with Angularjs. I'd like when I click on the <h2> (the event name) of some event, to open an ovelay that displays the same data from the database but only for this event which is clicked.
I'm sure that 'filter' will do the work but it seems I'm doing something wrong.
Here is my code. The ng-app and ng-controller are in the <main> tag.
Angularjs version: 1.7.9
My Html:
<main ng-app="eventsApp" ng-controller="eventsCtrl">
<!-- Overlay that holds and displays a single event -->
<div>
<div ng-repeat="x in singlePageEvent | filter:hasName(x.eventName)">
<div>
<img ng-src="{{x.eventImgSrc}}" alt="{{x.eventImgName}}"/>
<h2 class="event-name">{{x.eventName}}</h2>
<p>{{x.eventTime}}</p>
<p>{{x.eventPlace}}</p>
</div>
</div>
</div>
<!-- A list with all the events -->
<div ng-repeat="x in events">
<div>
<img ng-src="{{x.eventImgSrc}}" alt="{{x.eventImgName}}"/>
<h2 ng-click="singleEventOpen(x)" class="event-name">{{x.eventName}}</h2>
<p>{{x.eventTime}}</p>
<p>{{x.eventPlace}}</p>
</div>
</div>
</main>
My script:
let eventsApp = angular.module('eventsApp', []);
this filter below is not working at all. It continues to show all the events.
eventsApp.filter('hasName', function() {
return function(events, evName) {
var filtered = [];
angular.forEach(events, function(ev) {
if (ev.eventName && ev.eventName.indexOf(evName) >-1) {
filtered.push(ev);
}
});
return filtered;
}
});
eventsApp.controller('eventsCtrl', function($scope, $http) {
let x = window.matchMedia("(max-width: 450px)");
let singleEventOverlay = angular.element(document.querySelector('div.single-event.overlay'));
let singleEvent = singleEventOverlay;
function responsiveEventImages(x) { //this displays the list with events
if (x.matches) {
$http.get('./includes/events_res.inc.php').then(function(response) {
$scope.events = response.data.events_data;
});
} else {
$http.get('./includes/events.inc.php').then(function(response) {
$scope.events = response.data.events_data;
});
}
}
...and then by invoking singleEventOpen() the overlay appears, but it displays all the data, not just the clicked event
$scope.singleEventOpen = function(singleEvent) {
let clickedEvent = singleEvent.eventName; //I got the value of each h2 click thanx to #georgeawg but now what?
console.log("Fetching info for ", singleEvent.eventName);
$http.get('./includes/single_event.inc.php').then(function(response) {
$scope.singlePageEvent = response.data.events_data;
});
singleEventOverlay.removeClass('single-event-close').addClass('single-event-open');
}
});
The php file with the database extraction is working fine so I won't display it here.
What should I do to make the overlay display only the event which <h2> is clicked?
Here is a pic of the list with events
Here is a pic of the overlay
Thanx in advance.
EDITED
I got the value of each h2 click thanx to #georgeawg but now what?
UPDATE
Hey, thanx a lot #georgeawg . After many attempts I finally did this:
$scope.singleEventOpen = function(singleEvent) {
$http.get('./includes/single_event.inc.php').then(function(response) {
let allEvents = response.data.events_data;
for (var i = 0; i < allEvents.length; i++) {
singleEvent = allEvents[i];
}
});
console.log('Fetching data for', singleEvent);
$scope.ex = singleEvent;
});
And it works well.

Change the ng-click to pass an argument to the singleEventOpen function:
<div ng-repeat="x in events">
<div>
<img ng-src="{{x.eventImgSrc}}" alt="{{x.eventImgName}}"/>
<h2 ng-click="singleEventOpen(x)" class="event-name">{{x.eventName}}</h2>
<p>{{x.eventTime}}</p>
<p>{{x.eventPlace}}</p>
</div>
</div>
Then use that argument:
$scope.singleEventOpen = function(singleEvent) {
console.log("Fetching info for ", singleEvent.eventName);
//...
//Fetch and filter the data
$scope.ex = "single item data";
}
Adding an argument is the key to knowing which <h2> element was clicked.
Update
Don't use ng-repeat in the overlay, just display the single item:
<!-- Overlay that holds and displays a single event -->
̶<̶d̶i̶v̶ ̶n̶g̶-̶r̶e̶p̶e̶a̶t̶=̶"̶x̶ ̶i̶n̶ ̶s̶i̶n̶g̶l̶e̶P̶a̶g̶e̶E̶v̶e̶n̶t̶ ̶|̶ ̶f̶i̶l̶t̶e̶r̶:̶h̶a̶s̶N̶a̶m̶e̶(̶x̶.̶e̶v̶e̶n̶t̶N̶a̶m̶e̶)̶"̶>̶
<div ng-if="ex"">
<div>
<img ng-src="{{ex.eventImgSrc}}" alt="{{ex.eventImgName}}"/>
<h2 class="event-name">{{ex.eventName}}</h2>
<p>{{ex.eventTime}}</p>
<p>{{ex.eventPlace}}</p>
</div>
</div>

jQuery loop one to one

I have problem with my code.
I have products on my website, each product has his own <a><h1>CODE</h1></a> and I need to take this CODE and paste it before an image. I need to copy element with has class="loop1" and paste it into another element with class="lop1" and then take another element with class="loop2" and paste into element with class="lop2" and so on..
I made class with same numbers for easier copying, but it doesnt work. Can sombody help me?
This is my code:
$('#loop').addClass(function(i) {
return 'lop'+(i+1);
});
$('.p-name').addClass(function(i) {
return 'loop'+(i+1);
});
function doForm() {
var numb = ["1","2","3","4","5","6","7","8","9","10","11","13","14"];
for (var i=0;i<numb.length;i++) {
number = numb[i];
selector = '.loop' + number;
if ($(selector).length != 0) {
val = $(selector).html();
$('lop' + number).html(val);
}
}
}
doForm();
Related html:
<div class="columns">
<div id="loop" class="lop1"></div>
<div class="p-image">
<img src="https://" width="290" height="218">
</div>
<div class="p-info">
<span itemprop="name">PRODUCT</span>
</div>
<div>
So I need to take from "p-info > a" and paste it into div "lop1". Depends on number in class copy and paste HTML into div with same number.

Change $('lop' + radek).html(val); to $('.lop' + number).html(val);
Notice the . at the beginning of lop, it will create a selector to fetch element based on the class.
$('#loop').addClass(function(i) {
return 'lop'+(i+1);
});
$('.p-name').addClass(function(i) {
return 'loop'+(i+1);
});
function doForm() {
var numb = ["1","2","3","4","5","6","7","8","9","10","11","13","14"];
for (var i=0;i<numb.length;i++) {
var number = numb[i];
var selector = '.loop' + number;
if ($(selector).length != 0) {
var val = $(selector).html();
$('.lop' + number).html(val);
}
}
}
doForm();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="columns">
<div id="loop" class="lop1"></div>
<div class="p-image">
<img src="https://" width="290" height="218">
</div>
<div class="p-info">
<span itemprop="name">PRODUCT</span>
</div>
<div>

jQuery sorting fails

I have the following html structur (endless):
<div class="wrapper">
<div class="content"> Its block 3
<div class="number">3</div>
</div>
</div>
<div class="wrapper">
<div class="content"> Its block 2
<div class="number">2</div>
</div>
</div>
I want to sort it by clicking a button like this:
<div class="wrapper">
<div class="content"> Its block 2 <--- new order
<div class="number">2</div> <--- new order
</div>
</div>
<div class="wrapper">
<div class="content"> Its block 3 <--- new order
<div class="number">3</div> <--- new order
</div>
</div>
... but with my script it doesn´t work (because of the same div class name, I think?). So, how can I sort this and toggle the sort by highest number and lowest number? Can anybody help me?
function sortHigh(a, b) {
var date1 = $(a).find(".content .number").text()
var date2 = $(b).find(".content .number").text();
return $(a).find(".content .number").text() > $(b).find(".content .number").text();
};
function sortLow(a, b) {
var date1 = $(a).find(".content .number").text()
var date2 = $(b).find(".content .number").text();
return $(a).find(".content .number").text() < $(b).find(".content .number").text();
};
//how to toggle?
$(function () {
$('.sort').click(function () {
$('.content').sort(sortHigh).appendTo('.wrapper');
}, function () {
$('.content').sort(sortLow).appendTo('.wrapper');
});
});
Thats my bad try: fiddle

try to change your code with this:-
var toggle="high";
//how to toggle?
$(function(){
$('.sort').click(function () {
if (toggle == "high") {
toggle = "low";
$('.list').html($('.list .wrapper').sort(sortLow));
} else {
toggle = "high"
$('.list').html($('.list .wrapper').sort(sortHigh));
}
});
});
Demo

Using jQuery, you can add the sort functionality as such:
jQuery.fn.sortDomElements = (function() {
return function(comparator) {
return Array.prototype.sort.call(this, comparator).each(function(i) {
this.parentNode.appendChild(this);
});
};
})();
var srtdesc = true;
$(function() {
$(".sort").click(function() {
srtdesc = !srtdesc;
$(".list").children().sortDomElements(function(a, b) {
if (srtdesc) {
return Number($(a).find('.number').text()) - Number($(b).find('.number').text());
} else {
return Number($(b).find('.number').text()) - Number($(a).find('.number').text());
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="sort">Sort-Button</button>
<div class="list">
<div class="wrapper">
<div class="content">Its block 3
<div class="number">3</div>
</div>
</div>
<div class="wrapper">
<div class="content">Its block 1
<div class="number">1</div>
</div>
</div>
<div class="wrapper">
<div class="content">Its block 2
<div class="number">2</div>
</div>
</div>
</div>

You have two issues with your code.
The first is that your sorts are sorting strings. return "2" > "3" for example.
The other issue is that the click function you're using isn't toggling correctly. I'm guessing you're familiar with the .hover() syntax which is why you've done it that way.
As you can see, I'm forcing sortHigh and sortLow to return Numbers. I've also done a sorting low/high check and toggle within the click function.
function sortHigh(a, b) {
var date1 = Number($(a).find(".number").text());
var date2 = Number($(b).find(".number").text());
return date1 > date2;
};
function sortLow(a, b) {
var date1 = Number($(a).find(".number").text());
var date2 = Number($(b).find(".number").text());
return date1 <= date2;
};
$(function(){
var sortHighCheck = null;
$('.sort').click(function(){
if (sortHighCheck === true) {
$('.wrapper').sort(sortLow).appendTo('.list')
sortHighCheck = false;
} else {
$('.wrapper').sort(sortHigh).appendTo('.list')
sortHighCheck = true;
}
});
});
Edit: Forgot to add the jsfiddle link

If you want to sort, you can add data-val attribute to each content div:
<div class="content" data-val="2"> Its block 2 <--- new order
and sort each wrapper div with this code:
jQuery("#sort").click( function() {
jQuery('.wrapper').sort(function (a, b) {
return jQuery(a).find('.content').data('val') - jQuery(b).find('.content').data('val');
}).each(function (_, container) {
jQuery(container).parent().append(container);
});
});