replace html content with other using javascript - javascript

i have html structure like below
<div class="block-compose">
<button class="icon icon-smiley btn-emoji"></button>
<div tabindex="-1" class="input-container">
<div class="input-emoji">
<div class="input-placeholder" style="display: none;">Type a message</div>
<div dir="auto" spellcheck="true" data-tab="1" contenteditable="true" class="input">how r u</div>
</div>
</div>
<div class="ptt-container"><span><button class="icon btn-icon icon-ptt"></button></span></div></div>
now i want to replace
<div class="ptt-container"><span><button class="icon btn-icon icon-ptt"></button></span></div>
by
<button class="icon btn-icon icon-send send-container"></button>
i am facing bit difficult do via javascript i am able to do it via jquery .
please help me with this

you need to use replaceChild from the parent:-
var container = document.getElementsByClassName('ptt-container')[0];
var button = document.createElement('button');
button.className = 'icon btn-icon icon-send send-container';
container.parentElement.replaceChild(button, container);
<div class="block-compose">
<button class="icon icon-smiley btn-emoji"></button>
<div tabindex="-1" class="input-container">
<div class="input-emoji">
<div class="input-placeholder" style="display: none;">Type a message</div>
<div dir="auto" spellcheck="true" data-tab="1" contenteditable="true" class="input">how r u</div>
</div>
</div>
<div class="ptt-container"><span><button class="icon btn-icon icon-ptt"></button></span>
</div>
</div>

Related

How to get the text value in a div html by clicking on button

I want to get the text between the div tag by clicking on the button event
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-secondary">
<div class="price-header">
<h3 class="title text-white">Gold Plan</h3>
<div class="price">
<span class="dollar">&#8377</span> 7000
</div>
<span class="permonth">3 months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> 12000
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-fourth">
<div class="price-header">
<h3 class="title text-white">Platinum Plan</h3>
<div class="price text-white">
<span class="dollar">&#8377</span> 15000
</div>
<span class="permonth">12 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
I have this type of divs its around three or four I want to detect the value 12000 and the month 6 Months by clicking on this button
How can I achieve that.
Try
$(".price-footer .btn").on( "click", function(event) {
const parent = $(this).parents('.pricing-table');
const priceText = $('.price', parent).text().trim();
const priceParts = priceText.split(' ');
console.log(`priceText: ${priceParts[1]}`);
// Output: "priceText: 12000"
const permonthText = $('.permonth', parent).text().trim();
console.log(`permonthText: ${permonthText}`);
// Output: "permonthText: 6 Months"
});
Demo - https://codepen.io/vyspiansky/pen/MWybEEr
You can add ids to the elements you want to extract the contents of, then you can use document.getElementById(id) to get those elements, and use .innerText to extract the string contents.
Then with a string.replace() you can remove any non-numerical values, and convert the monetary value into a number.
const dollarAmount = parseFloat(document.getElementById("dollar-info").innerText.replace(/[^0-9.]/g, ''))
const month = document.getElementById("month-info").innerText
console.log(dollarAmount)
console.log(month)
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div id="dollar-info" class="price text-primary">
<span class="dollar">&#8377</span>12000.80
</div>
<span id="month-info" class="permonth">6 Months</span>
</div>
Assuming you have many price tables you can loop each table as below example. You can wrap you data in a certain class and get the text value of that class div. Click the button on the to get the value in the example below
$(document).ready(function(){
$('.pricing-table').each(function(){
var $table = $(this);
$table.on('click', '.btn-primary', function(){
var price = $table.find('.price').text().trim();
var permonth = $table.find('.permonth').text().trim();
alert("price is " + price + " for " + permonth);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> 12000
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal"
class="btn btn-primary btn-block btn-lg" href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
There are so many options to do this. Here is my example with the snippet and code sandbox.
// jquery
const findValues = (target, value) => target.parents().eq(1).find(value);
$(document).on("click", ".btn", (e) => {
const $target = $(e.target);
// dollar is optional
const $dollar = findValues($target, ".dollar");
const $value = findValues($target, ".value");
const $month = findValues($target, ".permonth");
$("#test").text(`${$dollar.text()} ${$value.text()} ${$month.text()}`);
});
// // vanilla js
const test1 = document.querySelector("#test1");
document.querySelectorAll(".btn").forEach((btn) => {
btn.addEventListener("click", ({ target }) => {
const nodes = target.parentNode.parentNode;
const dollar1 = nodes.querySelector(".dollar");
const value1 = nodes.querySelector(".value");
const month1 = nodes.querySelector(".permonth");
test1.innerText = `${dollar1.textContent} ${value1.textContent} ${month1.textContent}`;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-secondary">
<div class="price-header">
<h3 class="title text-white">Gold Plan</h3>
<div class="price">
<span class="dollar">&#8377</span> <span class="value">7000</span>
</div>
<span class="permonth">3 months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-third">
<div class="price-header">
<h3 class="title text-white">Diamond Plan</h3>
<div class="price text-primary">
<span class="dollar">&#8377</span> <span class="value">12000</span>
</div>
<span class="permonth">6 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4">
<div class="pricing-table pricing-fourth">
<div class="price-header">
<h3 class="title text-white">Platinum Plan</h3>
<div class="price text-white">
<span class="dollar">&#8377</span> <span class="value">15000</span>
</div>
<span class="permonth">12 Months</span>
</div>
<div class="price-footer">
<a data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-lg"
href="javascript:void(0);">Book an
Online Appointment</a>
</div>
</div>
</div>
<div id="test"></div>
<div id="test1"></div>
https://codesandbox.io/s/eager-voice-2w640?file=/src/index.js

Auto click button if style display is block

everyone, I am totally new to this and I was just wondering, is there a way to auto click a button when styling display:block?
I would really appreciate if someone can point me in the right direction.
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
You can check the display property to trigger() the click the event:
if($('#advert').css('display') == 'block')
$('#statsContinue').trigger('click');
function closeStats(){
console.log('auto click happened');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
You could check if the element is visible using .is(':visible') then trigger the click using click() like :
if ($('#advert').is(':visible')) {
$('#statsContinue').click();
}
function closeStats() {
alert('Clik triggered');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>

What is the correct way to use PARENT and FIND?

I try to get the value of input type=text by finding it in the parent DIV with class "half_weight". But I get the result NaN and it should be 0.8.
This is HTML:
<div class="add_controller amt no_space half_weight">
<div class="col s2 adds">
<a id="" href="#" class="button-minus product_quantity_down">
<i class="material-icons">remove</i>
</a>
</div>
<div class="col s2 adds">
<a href="#" class="button-plus product_quantity_up">
<i class="material-icons">add</i>
</a>
</div>
<div class="col s5 qty">
<div class="row">
<span class="col s6 qty_value">
<input type="text" name="" id="" stepquan="0.8" rtype="2" value="0.8" class="text" />
</span>
</div>
</div>
This is my jQuery:
$('.button-plus').on('click', function() {
valTemp = parseFloat($(this).parent('.half_weight').find('.qty_value').siblings('input[type=text]').val());
alert(valTemp);
});
You don't need siblings() (it refers to neighbors and you have got parent-child relationship). I put just
$(this).parents(".half_weight").find('.qty_value input[type=text]').val();
and it shows 0.8.
$('.button-plus').on('click', function() {
var valTemp = parseFloat($(this).parents(".half_weight").find('.qty_value input[type=text]').val());
alert(valTemp);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add_controller amt no_space half_weight">
<div class="col s2 adds">
<a id="" href="#" class="button-minus product_quantity_down">
<i class="material-icons">remove</i>
</a>
</div>
<div class="col s2 adds">
<a href="#" class="button-plus product_quantity_up">
<i class="material-icons">add</i>
</a>
</div>
<div class="col s5 qty">
<div class="row">
<span class="col s6 qty_value">
<input type="text" name="" id="" stepquan="0.8" rtype="2" value="0.8" class="text" />
</span>
</div>
</div>

how to show/hide reply comment box on multiple displayed comments

so here is the code i use this for me to show/hide the comment box it works actually but the problem i encounter when i make multiple comments when i tried to click the reply on the 1st comment the comment box show/hide but when i tried to click other comments it doesnt work anymore it only works on the first one.... is there any way to fix this?..
HTML code
<div id="replybutton" class="btn4 like" style="margin-top:-25px;margin-left:-10px;">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12" id="reply" style="background:#eff9c7;margin-left:50px;margin-top:-20px;display:none;" >
<img src="img/icons/no-icon-available.png" class="pull-left" style=" border-radius:50%;margin-bottom:3px;width:30px;height:30px;" />
<p style="margin-top:18px;line-height:15px;"><strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br>
<div class="btn4 disabled" style="margin-top:-25px;margin-left:-10px;">
<span style="margin-left:5px;font-size:12px;color:gray;"><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" style="width:88%;height:25px;margin-top:-10px;" placeholder="Write a reply..." />
</div>
JAVASCRIPT
<script type="text/javascript">
$(document).ready(function(){
$('#replybutton').click(function(){
$('#reply').toggle();
});
});
</script>
id must be unique in a HTML Page, you should change id to class replybutton and reply and jquery code would be,
$(document).ready(function(){
$('.replybutton').click(function(){
$(this).next('.reply').toggle();
});
});
Snippet,
$(document).ready(function() {
$('.replybutton').click(function() {
$(this).next('.reply').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>
<div class="container">
<div class="replybutton btn4 like" style="">
<span class="btn reply" id="replyb">Reply</span> • 
</div>
<div class="col-lg-12 reply" style="display:none">
<img src="img/icons/no-icon-available.png" class="pull-left" style="" />
<p>
<strong class="font-1" style="margin-left:10px;">Hajime Sasota </strong> Sample comment<br/>
<div class="btn4" style="">
<span style=""><abbr class="timeago" title="">time</abbr></span>
</div>
</p>
<input type="text" class="form-control pull-right" placeholder="Write a reply..." />
</div>
</div>

Issue in opening modal over modal?

So I am trying to open modal over other modal which is not working. there is one link say "login" which opens up another modal for me. why this is happening ?
primary modal call from following
<ul class="one-page-menu" data-easing="easeInOutExpo" data-speed="1250" data-offset="160">
<li>Sign Up</li>
<li class="menu-item-emphasis"><div>Login</div></li>
</ul>
primary modal
<div class="modal1 mfp-hide" id="modal-get-started" >
<div class="block divcenter" style="background-color: #FFF; max-width: 500px;">
<div style="padding: 50px;">
<form name="reg_form" id="get-started-form" class="nobottommargin">
<div class="row clearfix">
<div class="col-sm-12">
<h3 class="font-body">Register for Free Trial</h3>
</div>
</div>
<button class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>
<button id="customGoogleBtn1" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button>
<br>
<div style='padding-top: 30px;padding-left: 50px' ng-show ="errorAlreadyRegister">
<span style='color:red;x' >Seems already registered. <a ng-click= "closePopup()" href="#" > Log in </a> instead?</span>
</div>
</form>
</div>
</div>
</div>
wants to open on login link
<div class="modal1 mfp-hide" id="modal-login" >
<div class="block divcenter" style="background-color: #FFF; max-width: 400px;">
<div style="padding: 50px;">
<h3 class="font-body">Login to your Account</h3>
<form class="nobottommargin">
<div class="col_full">
<label class="font-body capitalize" for="login-form-modal-username">Username:</label>
<input type="text" id="login-form-modal-username" name="login-form-modal-username" value="" class="form-control" />
</div>
<div class="col_full">
<label class="font-body capitalize" for="login-form-modal-password">Password:</label>
<input type="password" id="login-form-modal-password" name="login-form-modal-password" value="" class="form-control" />
</div>
<div class="col_full nobottommargin">
<button class="button button-rounded nomargin" id="login-form-modal-submit" name="login-form-modal-submit" value="login">Login</button>
Forgot Password?
</div>
</form>
<div class="line line-sm"></div>
<button class="button button-rounded btn-block t400 center capitalize si-facebook si-colored noleftmargin norightmargin" ng-click="fbLogin()">Login with Facebook</button>
<button id="customGoogleBtn" class="button button-rounded btn-block t400 center capitalize si-gplus si-colored nomargin">Login with Google</button>
<!-- Login with Google -->
</div>
</div>
</div>
function called on login link
$scope.closePopup = function(){
$.magnificPopup.close();
$.magnificPopup.open({
items: {
src: '#modal-login'
}
});
}

Categories