javascript set weight to characters in text - javascript

I want to apply text "<b>H</b>ell<b>o</b>" to the paragraph with id="predogled" using javascript, so the output will be Hello.
I tried with this:
<script>
function formattext(){
document.getElementById('predogled').innerText="<b>H</b>ell<b>o</b>";
}
</script>
<p id="predogled"></p>
<button type="button" onclick="formattext()">Format!</button>
But this code literally print "<b>H</b>ell<b>o</b>" and the characters are not bold as I want.

That's what innerText does. If you want it to be interpreted as HTML, use innerHTML instead.

you have to use innerHTML
<script>
function formattext(){
document.getElementById('predogled').innerHTML="<b>H</b>ell<b>o</b>";
}
</script>
<p id="predogled"></p>
<button type="button" onclick="formattext()">Format!</button>

With innerText you print a string.
With innerHTML you print the HTML content of the elements.
Try using innerHTML besides innerText:
function formattext(){
document.getElementById('predogled').innerHTML="<b>H</b>ell<b>o</b>";
}

Related

Remove style attributes from string

I'm trying to remove all style attributes from a string (and not an object), in JavaScript or jQuery.
Example
var html = "<p style="color:red">my text</p>";
And I want to obtain this:
<p>my text</p>
Is it possible to do it without calling the functions that we can call on objects (as removeAttr)?
Thanks
If you are not looking to use JavaScript or jQuery objects, have you tried using regular expressions?
This answer to a previous question shows a php version that can be adapted to JavaScript using the replace function.
See if this helps.
$("button").click(function() {
$("p").removeAttr("style");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="color:red">my text</p>
<button>Remove the style attribute from all p elements</button>

Inner Text not working for Paragraph and Heading HTML Elements

I'm newbie to Javascript, I tried the below code, it works fine for <div> element but not for <P> and <h1> elements
<script type="text/javascript">
function PrintText(){
document.getElementById('heading').innerText = 'Hello World';
}
</script>
<body>
<div id="heading"></div> // Works
<h1 id="heading"></h1> // Not Working
<P id="heading"></P> // Not Working
<button type="button" onclick="PrintText()">Submit</button>
</body>
When I use document.getElementById('heading').innerHTML= 'Hello World'; for <P> and <h1> elements the above script works(Using innerHTML instead of innerText)
Why the innerText property is not working for <p> and <h1> elements?
First suggestion is don't ever put same IDs on multiple elements in same page.
Why?
Because when you do document.getElementById() browser lookup stops when it finds first element of that ID.
Second suggestion is:
Change
innerText
To.
textContent
innerText won't work cross browser. Better to use standard way to put text with textContent.
Problematic here is your are using IDs. An ID is something unique. An ID can't be reused. If you want to assign multiple elements at once give them the same class and call them by class in your Javascript code. This should solve your problem as Javascript does not expect multiple elements to have the same ID and so it is only editing the first element.

Get the Text inside the element

<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;text-align:
justify;line-height:normal">
First Text
<span lang="EN-US" style="font-size:12.0pt;
font-family:"Times New Roman","serif"">
Second Text</span>
</p>
This is my code, how to get the content inside the paragraph tag. [The tag may change to div or ul]. I need all the content inside the paragraph tag by javascript.
The output should be :
First Text Second Text
Sorry I am new to javascript, searched but cant find answer for this relevant problem. Thanks
To get the value of a tag, you can get the element with a selector and use innerHTML to get the value. like this:
<p>hi there</p>
console.log(document.getElementsByTagName('p')[0].innerHTML);
n.b. in the code above it's selecting by tag name, so it returns an array of matching elements
So in your example, using .innerHTML with give you the P tags content, including any html tags etc.
if you want just the content, you can use .textContent
console.log(document.getElementsByTagName('p')[0].textContent);
This wont give you the inner html tags
n.b. there is also the innerText method, However this isnt supported accross browsers.
You can change according to the tag you need, but basically this will do the trick:
document.getElementsByTagName('p')[0].innerText
Fiddle
InnerText should be a good solution.
console.log(document.getElementsByTagName('p')[0].innerText);
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;text-align:
justify;line-height:normal">
First Text
<span lang="EN-US" style="font-size:12.0pt;
font-family:"Times New Roman","serif"">
Second Text</span>
</p>

How can we get a string value from js file to HTML? [duplicate]

This question already has answers here:
Append text to textarea with javascript
(3 answers)
Closed 8 years ago.
How can we pass a string from js file to HTML? Assume I have declared a string in privacy.js and I need to get in to my html text area.
I have imputed the script file:
<script type="text/javascript" src="js/privacy.js"></script>
I am assinging string value in to a div
document.getElementById("privacy_text").innerHTML = privacy_string;
I need the Sting value in text area
<textarea class="terms" readonly="readonly">
<div id="privacy_text"></div>
</textarea>
Don't embed a div in a textarea and rather assign it it's own id:
<textarea id="privacy_textarea"></textarea>
And then try to assign a value to it:
document.getElementById("privacy_textarea").value = privacy_string;
Here is a working example.
You could as well use innerHTML but textarea is a form element so I'd recommend to use value.
Give your textarea an ID like, this
<textarea class="terms" readonly="readonly" id="theTextarea">
</textarea>
and then use the following JavaScript to select it and change the value:
document.getElementById("theTextarea").value = "theValue";
If you have access to jQuery, you can use:
$("#theTextarea").val("theValue");
Fiddle
Either way, a div can't go inside a textarea.
If you can assign an ID to your textarea...
<textarea id="myTextArea"></textarea>
Then this should work:
document.getElementById("myTextArea").value = privacy_string;
Give that textarea an ID , then set value to text area like document.getElementById('your text area id').value=privacy_text; from javascript file.
eg:
<script>
var privacy_text="your string";
document.getElementById(textId).value=privacy_text;
</script>
<textarea id="textId"></textarea>
Try this:
document.querySelector(".terms").value = 'someValue';
You can find HTML elements from javascript using document.querySelector by using different type of "query filters" in the above example it is finding the text area by CSS class using .cssClass.
Regarding the div inside your textarea object please note that is not possible. You can only non-HTML text.
<html>
<head>
<script type="text/javascript">
function printValue()
{
var name="Anand";
document.getElementById("textbox1").innerHTML=name;
}
</script>
</head>
<body>
<input type="text" id="textbox1"/>
<input type="button" value="GetText" onclick="PrintValue()"/>
</body>
</html>
Instead of .innerHtml, use this:
document.getElementById("privacy_text").value= "Hello";

Cannot get the hidden tag value

Here is my code:
<html>
<head>
<script type="text/javascript">
var x= document.getElementById("2").value;
document.getElementById("1").innerHtml = x;
</script>
</head>
<body>
<p hidden="hidden" id="2">This paragraph should be hidden.</p>
<p>This is a visible paragraph.</p>
<p><b>Note:</b> The hidden attribute is not supported in IE.</p>
<p id="1"></p>
</body>
</html>
in this code i have a hidden tag as you can see. I want that the javascript code read text value of the p tag with an id 2 and then print the same value to other <p> tag wiht id="1". But this is not working. Earlier i even tried to use nodeValue but also this is not working and when i checked out in google developer tool then it was showing an error as following:
Cannot read property 'value/nodeValue' of null
please note:
after a quick experiment i noted that after adding a event handler <body onload="y();>" there was no error but there was no expected result!
please help!
hidden is an input element type, not a p attribute:
<input type="hidden" id="2" value="This input should be hidden." />
There are three problems:
there is no innerHtml, innerHTML is the correct syntax.
the hidden "p" does not have a value, it is not an input field. use innerHTML for accessing it.
your javascript code runs before the browser knows about paragraps, so they don't exist when you want them to be accessed. put javascript after the paragraphs or run the code after the page is loaded.
this should work:
<html>
<head>
</head>
<body>
<p hidden="hidden" id="2">This paragraph should be hidden.</p>
<p>This is a visible paragraph.</p>
<p><b>Note:</b> The hidden attribute is not supported in IE.</p>
<p id="1"></p>
<script type="text/javascript">
var x= document.getElementById("2").innerHTML;
document.getElementById("1").innerHTML = x;
</script>
</body>
</html>
Don't use numbers for ID.
Try something like <p id="hello"></p>
I think you need to change your tag to then you can set a CSS class with .hidden { display:none; }.
Wrap your Javascript in a function and call it when you need to or go back to your
Also as Maaz said, try not to use numbers in your ID's.
var hiddenValue = document.getElementById('2').innerHTML;
document.getElementById('1').innerHTML = hiddenValue;
The problem with this (and if you try and style it also) is that classes and ID's should not start with (or include) numbers.
Rename your ID's to one and two and then update your javascript accordingly.
e.g
<p id="one">Some stuff</p>
Also hidden cannot be used with a p element as it's for inputs only.
You're better off using display:none; in CSS.
If you NEED to access it via css as a number, you can use
[id='1']{
/*code*/
}
but your javascript still wont work.
As James has pointed out, using numbers for ID's is perfectly valid in HTML5.

Categories