How can I replace specific characters in a div? - javascript

I would like to change the comma into an apostrophe in this div.
<div id="range" class="range-slider">
<div class="something">15,000.00</div>
</div>
So instead of 15,000.00 I would like to do 15'000.00
I cannot alter the HTML so I think I need to achieve this in JS, right?
Do I need to use the changeText function?
Many thanks in advance.

There is no native changeText function in JavaScript. You can change the text content of an element using textContent property and use replace() method to replace , to '.
let elem = document.querySelector(".something")
elem.textContent = elem.textContent.replace(",", "'");
<div id="range" class="range-slider">
<div class="something">15,000.00</div>
</div>

To add to TechySharnav's answer, you can also query for the classname directly.
var el = documents.getElementByClassNames("something");
el.textContent = el.textContent.replace(',',"'");

Related

Cannot manage to change the inner html of a div element

I cannot manage to change the inner html of a div element
<div class="emoji-wysiwyg-editor form-control" data-id="83fa07d0-2bab-4c02-8bb6-a2133ae64bbd"
data-type="input" placeholder="Chat Message" contenteditable="true" id="chatMessageSurrogate"
data-toggle="tooltip" data-placement="top" data-title="Please input a message within 300
characters." autocomplete="off" style="height: 63px;">wafwafgz</div>
I've tried the following:
$(".emoji-wysiwyg-editor.form-control").val("Hello!")
document.getElementsByClassName(".emoji-wysiwyg-editor.form-control").innerHTML = "Hello!"
but none of them is working
$(".emoji-wysiwyg-editor.form-control").html("Hello!"); should work
as stated previously .html("hello") should work, but also, getElementsByClassName i believe only works on a single class name and returns and array, so the below should also work
$(".emoji-wysiwyg-editor.form-control").html("Hello!");
// or
document.getElementsByClassName("emoji-wysiwyg-editor")[0].innerHTML = "Hello!"
In your HTML code there are two different class "emoji-wysiwyg-editor" and "form-control". So you have to use any of one.
$(".emoji-wysiwyg-editor").html("Hello!");
$(".emoji-wysiwyg-editor .form-control").html("Hello!");
And you want to add html contents in DIV so you have to use html. val is use for input typt.
in pure JavaScript with the use of multiple class.
document.getElementsByClassName("emoji-wysiwyg-editor form-control")[0].innerHTML = "hello";
Using JS,
var a = document.querySelector('.emoji-wysiwyg-editor');
a.innerHTML = "Hello";

HTML Parsing using javaScript

I am trying to get parse HTML document.
this is the HTML:
<h1>
<span class="memName fn" itemprop="name">Ankur Arora</span>
<span class="display-none" itemprop="image">http://photos1.meetupstatic.com/photos/member/3/8/f/8/member_249974584.jpeg</span>
<span class="display-none" itemprop="url">http://www.meetup.com/Meetup-API-Testing/members/191523682/</span>
</h1>
I need to get the picture and the name.
I try this code:
var name = document.querySelector("memName fn").name;
Anyone can help me? I'm new in javaScript...
Thanks
To get the inner text, you can use the text() function, like this:
HTML:
<span class="memName fn">Ankur Arora</span>
Jquery:
var memName = $(".memName").text();
console.log(memName); // Via console log
alert(memName); // Alert it
It's easy with jQuery. Just include it in your page:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Then use .text() or .html() to extract the content of the span-elements
var pictureLink = $("span[itemprop='image']").text();
//.html() also gets the html-elements inside
var name = $("span[itemprop='name']").html();
https://jsfiddle.net/bh9mebru/
You can also use innerHTML to get the text.
<span id="memId" class="memName fn">Ankur Arora</span>
document.getElementsByClassName('memName') - This will give the list of elements having the class 'memName'
To get the first element's inner text use document.getElementsByClassName('memName')[0].innerHTML
or access by id .
document.getElementById('memId').innerHTML

how to assign variable in this jquery code?

i have a few divs
<div number='one_one' />
<div number='one_two' />
<div number='one_three' />
in jquery variable i have
var session_one = "one_one";
my problem is i cant click programatically the div with that number attribute
here is my trying :
$("div[number=session_one]").click()
but instead of click i have got an Object
Object[]
please help
Concatenate it like bellow
$("div[number=" + session_one + "]").click()
$("div[number='"+session_one+"']").trigger("click");
You are checking session_one with div number. But there is no div with number session_one. So you have to pass your div number as shown above.
Use: $("div[number=" + session_one + "]").click()
FYI: I wouldn't use the property "number" in a div. Use "id" or at least "data-number" which is html5 valid.
i think its because number is not a valid HTML Attribute use HTML5 data attribute as
<div data-number='one_one' />
<div data-number='one_two' />
<div data-number='one_three' />
then jquery
var session_one = "one_one";
$("div[data-number=" + session_one + "]").click()
The right syntax should be like this:
$("div[number="+session_one"+]").click(function(){
alert("clicked");
});
If you want to trigger it automatically, use this:
$("div[number="+session_one"+]").trigger("click");

Iterating through list of <div> using jQuery

I want to use jQuery to iterate through a list of <div>s in the following example:
<div id="selectedDefinitionsDiv">
<div id="selectedDef1" class="myclass">
<textarea class="textClass" style="margin-left:5px;width:600px;height:80px;">an adoptive country</textarea>
<input type="button" onclick="removeSelectedDefinition(1)" value="Delete">
</div>
<div id="selectedDef2" class="myclass">
<textarea class="textClass" style="margin-left:5px;width:600px;height:80px;">my adopted state</textarea>
<input type="button" onclick="removeSelectedDefinition(2)" value="Delete">
</div>
</div>
I want to pull out the data in each of the textareas. In the above example that would be an adoptive country and my adopted state
I have tried
$(#selectedDefinitionsDiv).children('myclass').each(function(i) {
var val = $(this).children('textClass').value;
processString( val );
});
But it doesn't go into the loop at all. Any idea what is wrong with my jQuery?
Quotes missing in selector
Change
$(#selectedDefinitionsDiv)
to
$("#selectedDefinitionsDiv")
Also change value to val() and add . before class name in selector
$("#selectedDefinitionsDiv").children('.myclass').each(function(i) {
var val = $(this).children('.textClass').val();
processString( val );
});
On more thing closing > of first div
Live Demo on jsBin
Live Demo on jsFiddle
You need quotes: $("#selectedDefinitionsDiv")
Instead value, you need to use val()
With your existing code you will probably be getting a JavaScript error since the syntax is illegal. This explains why the code is not executing. The illegal syntax is that
$(#selectedDefinitionsDiv)
is missing the surrounding quotes like so $('#selectedDefinitionsDiv').
However, whilst that fixes the syntax error, there are further problems with the selectors.
The CSS class selector in the second and third selectors children('myclass') and .children('textClass') is missing the leading . - it should be .myclass and .textClass and you need to use jQuery's .val() instead of the plain JavaScript .value since the object you are calling .value on is a jQuery object.
A simpler solution would be to just supply a more specific selector:
$('#selectedDefinitionsDiv .textClass').each(function(i) {
var val = $(this).val();
processString(val);
});​
Just looks to need a bit of tidy up - myclass needs to be prefixed with a . and the id need to be in quotes.
children('.textClass') also needs a . prefix:
$("#selectedDefinitionsDiv").children(".myclass").each(function(i)
{
var val = $(this).children('.textClass').val();
processString( val );
});
Try this:
$('textarea').each(function(i) {
var val = $(this).val();
processString( val );
});
Hope this helps.

Get value of class of a DIV using JavaScript

Question is simple. Not using jQuery... how do I get the value of class value in a DIV using regular JavaScript?
Thanks.
Assuming this HTML
<div id="Target" class="MyClass" />
Like This
var ElementCssClass = document.getElementById("Target").className;
get a reference to the div and use .className
document.getElementById('someDiv').className

Categories