I have this div:
<h1>$340</h1>
I need to detect if inside of this div there is a dollar symbol,
If so - remove it
I'll explain again:
I have got this code so far so I manage to detect if the symbol is in the div, but I can't figure how to remove it and update the DOM?
var sign = $('h1').text();
if (sign.indexOf("$") >= 0) {
//remove the sign
}
This is quite easy using a simple regex
var div = $('your selector here');
div.html(div.html().replace(/\$/g, ''));
That's what I have meant, without the If condition:
$('h1').text( $('h1').text().replace("$", ''));
Something like this should work:
$("h1").each(function() {
var $el = $(this);
var text = $el.text().replace("$", "");
$el.text(text);
});
Try like this
var price = $("h1").html().replace(/[^\d\.]/g, '');
console.log(price);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$( document ).ready(function() {
var val=$('#demo').html().replace('$','');
$( "div" ).replaceWith( val );
});
</script>
</head>
<body>
<h1 id='demo'>$540</h1>
</body>
</html>
Jquery can select based on contents. See https://api.jquery.com/contains-selector/.
What you need to do is:
$( "div:contains('$')" ).remove();
$(function() {
$("#button").click(function() {
var input = $("#input").val();
input = input.replace('$', '');
$("#input").val(input);
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<input type="text" id="input" placeholder="type here..." />
<button id="button">Remove</button>
</body>
</html>
This is the JQuery approach, I used replace on click on button to remove $ from input.
function HasDollar() {
if($("h1").html().indexOf("$") != -1)
return true;
else
return false;
}
try this.
Related
I'm using Divi and I can't seem to update the email that shows up in the topbar in the header on the Spanish version of the site. My JS is a little rusty.
The URL is domainofclient.com/es/inicio
The element is <span id="et-info-email">sales#domainofclient.com</span> which needs to change to <span id="et-info-email">ventas#domainofclient.com</span>
What I've tried
<script type="text/javascript">
if(document.URL.indexOf("/es/inicio/") >= 0){
document.getElementById('et-info-email').innerHTML = 'ventas#domainofclient.com'
}
</script>
I've also tried the following JQ
<script type="text/javascript">
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
</script>
You are almost there. I would although try to first of all wrap the code into a function and run it only when the page is ready.
function replaceEmail() {
if(document.location.pathname.indexOf("/es/inicio") !== -1){
document.getElementById("et-info-email").innerHTML = "ventas#domainofclient.com"
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Author">
<title>#[[$Title$]]#</title>
</head>
<body onload="replaceEmail()">
<span id="et-info-email">sales#domainofclient.com</span>
</body>
</html>
I figured it out!
<script type="text/javascript">
jQuery(document).ready(function() {
if(window.location.href === "https://domainofclient.com/es/inicio/") {
jQuery('#et-info-email').text('ventas#domainofclient.com');
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Assignment Q1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style/style1.css" type="text/css" rel="stylesheet">
<script>
$(document).ready(function() {
$('button').click(function() {
var text = $(this).text();
console.log(text);
if (text == 'night') {
$('body').css('background-color', 'black');
$(this).text('day');
console.log(text);
} else {
$('body').css('background-color', 'white');
$(this).text('night');
console.log(text);
}
});
});
</script>
</head>
<body>
<button>
night
</button>
</body>
</html>
The thing that is happening over here is that when I am clicking on the button for the first time nothing is working ,but from the second click on wards the code is working as expected.
I have also checked what text method is getting for the first time
output:
night
night
and after the second click text method is getting
output:
night
night
day
day
Not able to understand what is happening over here and how text method output is changing by itself?
The problem is that the button looks like this in the HTML:
<button>
night
</button>
The whitespace is important - when you call .text on the button, you get all the text content of the button, including the whitespace.
Either don't use any whitespace initially:
<button>night</button>
Or call .trim() on the resulting text:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Assignment Q1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style/style1.css" type="text/css" rel="stylesheet">
<script>
$(document).ready(function() {
$('button').click(function() {
var text = $(this).text();
console.log(text);
if (text.trim() == 'night') {
$('body').css('background-color', 'black');
$(this).text('day');
console.log(text);
} else {
$('body').css('background-color', 'white');
$(this).text('night');
console.log(text);
}
});
});
</script>
</head>
<body>
<button>
night
</button>
</body>
</html>
The issue is because the text() you receive from the method call has whitespace around it so it doesn't match the 'night' string you're comparing to.
To fix this, use trim() to remove that whitespace:
$(function() {
$('button').click(function() {
var text = $(this).text().trim();
if (text == 'night') {
$('body').css('background-color', 'black');
$(this).text('day');
} else {
$('body').css('background-color', 'white');
$(this).text('night');
}
console.log(text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
night
</button>
Also note that you can improve the logic by using classes to set the styling and then toggleClass():
$(function() {
$('button').click(function() {
$('body').toggleClass('day night');
$(this).text(function(i, t) {
return t.trim() == 'night' ? 'day' : 'night';
});
});
});
.night { background-color: #000; }
.day { background-color: #FFF; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="day">
<button>
night
</button>
</body>
I started to mess around with JS yesterday but I'm like the biggest noob ^^,
I'm trying to make a button, that can show and hide a text input box with one click.
I have used createElement("input") to create the box but can anyone help me how to use removeChild properly? =D Cause I can't get it to hide. I want to use just html and js for this
Thanks!
/gruffmeister # scotland
Here's a pure javascript example for you:
var elem = document.createElement("input");
var btn = document.createElement("button");
var txt = document.createTextNode("Hide Input");
elem.id = "hideme";
btn.appendChild(txt);
document.body.appendChild(elem);
document.body.appendChild(btn);
btn.addEventListener( 'click', function(){
var input = document.getElementById("hideme");
document.body.removeChild(input);
} );
Why not use a simple jQuery approach:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$('button').click(function() {
$('p').toggle;
$("#myTextField").toggle();
});
});
</script>
</head>
<body>
<button>Toggle</button>
<input id="myTextField" type="text" name="myTextField" value="">
</body>
</html>
I want my datepicker to open only under condition, in this case the presence of a class, here's the not working code:
$('.ui-datepicker-trigger').click(function(e){
if ($(this).hasClass('disableDatepicker')) {
e.preventDefault();
}
});
Thanks!
This should be work
$("input").datepicker({
beforeShow: function(a,b){
if ($(this).hasClass('disableDatepicker')) return false;
}
});
http://jsfiddle.net/scTwm/2/
Try with 'not' selector or method
Selector
$('.ui-datepicker-trigger:not(.disableDatepicker)').click(function(e){
//your code
});
Method
$('.ui-datepicker-trigger').not('.disableDatepicker').click(function(e){
//your code
});
It's similar to what you did, you can find a live example here that I've created for you ( http://jsbin.com/kikok/1/ ).
Or check the code that is self explanatory:
$(document).ready(function(){
$(".click").on("click", function(e){
if ( $(this).hasClass("prevent") ) {
console.log("hasClass prevent!");
e.preventDefault();
}
});
});
The html:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<meta name="description" content="" />
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<a class="click" href="//google.com" target="_blank">Click1</a>
<a class="click prevent" href="//google.com" target="_blank">Click2</a>
</body>
</html>
Hope this helps!
I have created a html webpage here:
http://diagrams.inse1d.info/wbt.html
Code:
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div id="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" id="wbtTitle" /></h1>
<div id="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" id="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
Here is the jQuery code I wrote:
$(document).ready(function() {
$("h1").keypress(function(e) {
//get
wbtTitle = $('#wbtTitle').val();
// Write text after enter
if (e.which == 13) {
$("h1").text(wbtTitle);
}
});
$("span").keypress(function(e) {
//get
wbtNote = $('#wbtNote').val();
// Write note after enter
if (e.which == 13) {
$("span").text(wbtNote);
}
});
//Insert new WBT on button click
$("button").each(function() {
$(this).click(function() {
var wbtSet = $( "article" ).html();
$(wbtSet).insertAfter('section');
});
});
});
What I want to do is set the title and some note text using input boxes which works using jQuery. I then want to add a copy of the html into another article when the button is pressed without copying the inputs previously made with the possibility of setting new values when the article is cloned. The process should repeat over and over again.
Here is an image to help explain:
I am quite new to jQuery, I think you need to use a loop to fix this, I read that a .each() can be used http://api.jquery.com/jQuery.each/ but not quite sure.
Any help will be appreciated. Thanks.
I think I got your answer.
I changed the html a bit, because you duplicated some id's with your approach, that's not good. id's have to be unique on a page. I simply changed them to classes.
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div class="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" class="wbtTitle" /></h1>
<div class="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" class="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
And of course the jQuery. I got rid of your first two functions because they had no purpose in this context.
$(document).ready(function() {
//Insert new WBT on button click
$("button").on('click', function() {
var title = $(this).prev().find('.wbtTitle').val();
var note = $(this).prev().find('.wbtNote').val();
var wbtSet = $(this).prev("section").html();
$(this).prev().find('.wbtTitle').replaceWith(title);
$(this).prev().find('.wbtNote').replaceWith(note);
$(this).prev("section").after('<section>' + wbtSet + '</section>');
});
});
Here is a working fiddel
Fixing the answer given by hitokun_s
window.onload = function() {
// Save a copy of the element wbtSet element on pageload
var wbtSet = $("article").clone();
$("button").each(function() {
$(this).click(function() {
// Append a new one to the holder of the wbSets
$(wbtSet).appendTo($('section'));
});
});
}
I think this is what you want to do.
window.onload = function() {
$("button").each(function() {
$(this).click(function() {
var wbtSet = $("article:first-child").clone();
wbtSet.find("input").val("");
$(wbtSet).appendTo($('section'));
});
});
}