Develop Reference

JavaScript, HTML search engine - how to get parent of an element?

My problem is:
Search script is working, but it only hides h3 elements from the code.
<h3 class="post-subtitle" style="display: flex;">Protokoły tunelowania VPN</h3>
<h3 class="post-subtitle" style="display: flex;">Certyfikat cyfrowy</h3>
I need the code to hide the whole div with "post" ID instead of just h3 element.
How do i do that?
HTML Code for Search Bar:
<div id="kontener" class="container">
<div style="text-align:center" id="search-bar">
<input type="text" id="searchbar" onkeyup="searchBar()" class="shadow-lg">
</div>
</div>
HTML Code on Website
<!-- First element -->
<div id="post">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="URL">
<h2 class="post-title"><i class="far fa-sticky-note fa-xs" aria-hidden="true"></i> ASO</h2>
<h3 class="post-subtitle" style="display: flex;">Protokoły tunelowania VPN</h3>
</a>
<p class="post-meta">11 Maj, 2021</p>
</div>
</div>
</div>
<hr>
</div>
<!-- End of First element -->
<!-- Second element -->
<div id="post">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="URL">
<h2 class="post-title"><i class="far fa-sticky-note fa-xs" aria-hidden="true"></i> ELSK</h2>
<h3 class="post-subtitle" style="display: flex;">Certyfikat cyfrowy</h3>
</a>
<p class="post-meta">26 Kwiecień, 2021</p>
</div>
</div>
</div>
<hr>
</div>
<!-- End of Second element -->
JavaScript code:
<script>
function searchBar() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('post-subtitle');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="flex";
}
}
}
</script>

You just need to target couple of parent nodes, either by .parentElement / .parentNode or use .closest function.
Example:
<script>
function searchBar() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('post-subtitle');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].closest('#post').style.display="none";
// Or this below (note each parentElement targets parent tag)
// x[i].parentElement.parentElement.parentElement.parentElement.parentElement.style.display="none";
}
else {
x[i].closest('#post').style.display="flex";
}
}
}
</script>

How to edit HTML value if its in a class that cointains a specific href with javascript?

Well I am learning javascript and I am trying to write a function which would look if(href.contains(1234567) and change class="price" value to any number.
I tried googling but I cant seem to find an answer to this
<div class="product-info">
<a href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div>
</a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>
I expect class="price" value to be changed to some number

You can use the a[href*=1234567]+.price selector to do it.
a[href*=1234567] select all <a> elements that have a href attribute value containing "1234567" and +.price select element has class price placed immediately after that a[href*=1234567].
Demo:
$('a[href*=1234567]+.price').text(123456)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-info">
<a href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div></a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>
<a href="https:someUrl.com/test">
</a>
<div class="price">
ValueNoNeedsToBeAddedHere
</div>

A solution with jQuery:
function myFunction() {
var str = $('#link').attr('href');
if (str.indexOf("1234567") >= 0){
var x = document.getElementsByClassName("price");
var y = x[0];
y.classList.add('myClass');
y.classList.remove('price');
y.innerHTML = "123456"
}
}
myFunction();
.myClass{
background: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-info">
<a id="link" href="https:someUrl.com/1234567">
<div class="title">
Some Sweet Title
</div>
</a>
<div class="price">
ValueHereNeedsToBeAdded
</div>
</div>

You can do without jquery :-
<div class="product-info">
<a href="https:someUrl.com/1234567" id="link_id" onclick="check(this.href)">
<div class="title">
Some Sweet Title
</div></a>
<div class="price" id="setvalue">
ValueHereNeedsToBeAdded
</div>
</div>
function check()
{
event.preventDefault();
var href = document.getElementById("link_id").getAttribute("href");
if(href.includes(1234567))
{
document.getElementById('setvalue').innerHTML = '1313133';
}
}

open block on div click from list of div's in HTML

<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technology closedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
I have list of class="listing-main" and i try to open block class="thelanguage" style="display: none;" on click of class="technology closedlanguage".
But what i need, when i click on class="technology closedlanguage" at that time class change "closedlanguage" to "openlanguage" and style change 'none' to 'block'.
But when i click, only one block open at that time from list of div's
<script type="text/javascript">
$(document).ready(function () {
$('.lsiting-main .closedlanguage').click(function (event) {
event.preventDefault();
var target = $('.thelanguage');
$(target).toggleClass('hidden show');
$('.thelanguage').css('display', 'block');
})
});

I have updated the HTML a bit and also if your willing to use JavaScript then refer the below code, it is working as per your expectation.
Here is the JSFiddle Link: Working JS Fiddle Link
JS Code is :
<script>
document.getElementById("technologyclosedlanguage").addEventListener("click", myFunction);
function myFunction(){
var thelanguage = document.getElementById("thelanguage");
var technology = document.getElementById("technologyclosedlanguage");
thelanguage.style.display="block";
technology.className = "technologyopenlanguage";
alert(technology.className); //class name changed.
}
</script>
HTML Code is :
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technologyclosedlanguage" id="technologyclosedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" id="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
The Language
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
Let me know if it works, and helps you. Happy Coding.

Change your script to:
<script type="text/javascript">
$(document).ready(function () {
$(".closedlanguage").click(function (event) {
var target = $(".thelanguage");
$(target).toggleClass("hidden");
$(".hidden").css("display", "none");
event.preventDefault();
});

How to set class active to div?

I have this menu in this fiddle and I want to set active div on click:
<div class="account-item">
<div class="account-heading active">
<h4 class="account-title">
2. TRANSACTION_HISTORY
</h4>
</div>
</div>
I have this script but i get selected all divs
function SetActiveDiv()
{
var element = $("a").parent().parent();
if (element.hasClass("active")) {
element.removeClass("active");
} else {
element.addClass("active");
}
}

You need to pass the clicked element reference
1.MY_TICKETS
then
function SetActiveDiv(el) {
var element = $(el).closest('.account-heading');
element.toggleClass("active");
}
Demo: Fiddle
Note: Since you are using jQuery, try to use jQuery event handlers instead of inline handlers
So
1.MY_TICKETS
then
jQuery(function ($) {
$('.account-group .account-title a').click(function () {
var $heading = $(this).closest('.account-heading').toggleClass("active");
$('.account-group .account-heading.active').not($heading).removeClass('active');
})
})
Demo: Fiddle

just make the selector to look like (double class selector):
var element = $(".account-heading.active");

You need to take a look at your code and understand what it is doing. Take the following line:
$("a").parent().parent();
What does this do? It selects every anchor, then selects the parent, then selects the parent of that parent.
Considering you're using jQuery, you can use it to bind the event handler instead of using onClick in your html (which is considering bad practice).
$('a').on('click', function() {
$('.account-heading').removeClass('active');
$(this).parent().parent().addClass('active');
});
jsFiddle: http://fiddle.jshell.net/jxmbj36s/5/

Remove all the functions in html onclick="SetActiveLink('#/*')" and then use this jQuery function so you will not be repetitive:
$(".account-group a").on("click", function(){
$(".account-group a").removeClass("active");
$(this).addClass("active");
});
See the result here:
$(".account-group a").on("click", function(){
$(".account-group a").removeClass("active");
$(this).addClass("active");
});
.active {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 col-md-3 left-sidebar-container">
<div class="left-sidebar">
<div class="account">
<h1>MY_ACCOUNT</h1>
<div class="account-group" id="accordion">
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
1.MY_TICKETS
</h4>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
2. TRANSACTION_HISTORY
</h4>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
3. PAYIN
</h4>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
4.PAYOUT
</h4>
</div>
</div>
<div class="account-item">
<div class="account-heading active">
<h4 class="account-title has-sub">
<a data-toggle="collapse" data-parent="#accordion" href="#settings">5.SETTINGS</a>
</h4>
</div>
<div id="settings" class="account-collapse collapse in">
<div class="account-body">
PERSONAL_INFORMATION
NOTIFICATIONS
CHANGE_PASSWORD
GAME_SETTINGS
</div>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title has-sub">
<a data-toggle="collapse" data-parent="#accordion" href="#promotions">6.PROMOTIONS</a>
</h4>
</div>
<div id="promotions" class="account-collapse collapse">
<div class="account-body">
BONUSES
COMPETITIONS
VOUCHER_REDEEM
</div>
</div>
</div>
<div class="account-item">
<div class="account-heading">
<h4 class="account-title">
7. SYSTEM_MESSAGES
</h4>
</div>
</div>
</div>
</div>
</div>
</div>

I think that the following code will help you to solve this problem
function SetActiveDiv() {
var el = $("a").closest("div.account-heading")[0];
var el = $("a").parent().parent();
if ($(el).hasClass('active')) {
$(el).removeClass('active')
} else {
$(el).addClass('active')
}
}

Using document.elementFromPoint to get the position of all elements with a certain class and then alert the Left and Top positions

Hello for my project i need to get the positions of all .move elements and check if there is an element at relative position.
Here's the HTML code :
<article id="move_wrapper">
<div class="move">
<span class="location"></span>
</div>
<div class="move">
<span class="location"></span>
</div>
<div class="move">
<span class="location"></span>
</div>
<div class="move">
<span class="location"></span>
</div>
<div class="move">
<span class="location"></span>
</div>
</article>
And here's the JS code:
function overlap() {<br>
$(".move").click(function () {
$("#main *.move").each(function () {
var thisPosLeft = this.position().left;
var thisPosTop = this.position().top;
var elem = document.elementFromPoint(thisPosLeft - 100, thisPosTop - 100);
});
alert(elem.index(this));
});
}
Here's a jsfiddle with the full code:
http://jsfiddle.net/C3uqV/