Code running successfully but not showing output in the browser - javascript

Below is my code.
HTML :
<div id="vis">
</div>
JavaScript:
$('#vis').find('.set_texts').wrapInner('<div class="new_text">');
($('#vis').find('.new_text').text("NEW TEXT VALUE"));
When I run this code in 'inspect element' I can see the below code as output but nothing is showing in the browser. I want to show 'NEW TEXT VALUE' in the browser,how?
<div id="vis">
<div class="new_text">NEW TEXT VALUE</div>
</div>

<text> is not a valid HTML tag, you can use <div>,<p>,<span>... instead:
$('#vis').find('.set_texts').wrapInner('<span class="new_text">');
$('#vis').find('.new_text').text("NEW TEXT VALUE");

instead of this
$('#vis').find('.set_texts').wrapInner('<text class="new_text">');
use this
$('#vis').find('.set_texts').wrapInner('<span class="new_text">');

first you need to change html.
html:
<div id="vis">
<div class="set_texts"></div>
</div>
you do not have .set_texts element in your selected div(#vis). so wrapInner() is not adding any div.
you also have extra ) in the second line of jquery.
try this jquery:
$(document).ready(function(){
$('#vis').find('.set_texts').wrapInner('<div class="new_text">');
$('#vis').find('.new_text').text("NEW TEXT VALUE");
});
working demo
let me know if you have any question.

Related

How to get formatted html code from edited text in summernote

I am using summernote text editor. I want to get html formatted of text edited in editor. In summernote editor toolbar having a code view button. when click on the button we can see the html code of edited text. Now, I want html code to get as string or stored in variable. How it possible?
Please help me.
reference : github code is https://github.com/summernote/summernote
Add the below lines to index.html
<div class="container">
<div id="summernote" class="summernote"><p>Hello World</p></div>
<input type="submit" value="submit" onclick="myFunction()"/>
<script>
function myFunction() {
var MyDiv2 = document.getElementsByClassName('note-editable');
m = MyDiv2[0];
alert(m.innerHTML);
}
</script>
You have method summernote with argument 'code' for this.
Example:
<div class="summernote"></div>
<script>
$('.summernote').summernote();
</script>
Then Type something in field created from div and type in console:
$('.summernote').summernote('code')
You should see the same result as in example in #john answer

Return JavaScript into a HTML attribute

How is it possible to return a string from a JavaScript Code into a HTML attribute like in the following example?
<div class="xx" animation="yy" animate-duration="<spript>Code goes here<script>" ...>
</div>
I can not get it right, is there a solution?
<div class="xx" id="id1" animation="yy"></div>
<script>
document.getElementById("id1").setAttribute("animate-duration", "your value");
</script>
The id of the above <div> tag is id1. So document.getElementById("id1").setAttribute("animate-duration", "your value"); selects the <div> tag and sets it's animate-duration value to whatever you set.
I don't think your example will work because the script tags will only be treated as a string. I suggest you use Element.setAttribute(attribute name, attribute value) if you only want to set the attribute of the element.
<div class="xx"></div>
<script>document.querySelector(".xx").setAttribute("animate-duration", "value");</script>
See the following for more info:
https://developer.mozilla.org/en/docs/Web/API/Element/setAttribute

Add Div Text code inline to onclick event

I have a div where I would like to get the value and use it inside an onclick event.
Here's the div.
<div id="cars">100</div>
Then I need to enter the id cars text or html into the message below.
So I need to insert the 100 where is said INSERT HERE in the code below.
<img onclick="window.plugins.socialsharing.shareViaTwitter('Message: Hello INSERT HERE')" src="images/share_text.png" style="height:2em" />
How can I do this?
In plain javascript:
document.getElementById('cars').innerHTML
or with jQuery:
$('#cars').text()
This will be very simple using jquery
$("#cars").text();
Will give you the text
If you want the jQuery solution use .html() to get the text between the start/close div tags.
<img onclick="window.plugins.socialsharing.shareViaTwitter('Message: Hello' + $('#cars').html())" src="images/share_text.png" style="height:2em" />
Its not suggested to include jquery/ javascript code in html code. I suggest you can do this on document.ready event as below, you need to give an "id" to your image tag also.
HTML code (add id to image tag)
<div id="cars">100</div>
<img onclick="window.plugins.socialsharing.shareViaTwitter('Message: Hello INSERT HERE')" src="images/share_text.png" style="height:2em" id="image_id" />
Jquery Code:
$( document ).ready(function() {
var car_val = $("#cars").html();
var onclick_Val = $("#image_id").attr("onclick");
var onclick_new_val = onclick_Val.replace('INSERT HERE', car_val);
$("#image_id").attr( 'onclick', onclick_new_val );
});

Remove a particular div of specific text

I have the following code in a php page
<div class="vmenu">
<div class="first_li"><span >Add Shift</span></div>
<div class="first_li"><span>Add Comment</span></div>
</div>
Now I want to remove the div contains text "Add Shift" on document ready
$(function(){
$('.first_li span:contains('Add Shift')').remove();
});
Use jQuery .remove() and :contains(). Note that it's case sensitive
$('div:contains("Add Shift")').remove();
$('div.vmenu div:first-child').remove();
check it out on jsfiddle: http://jsfiddle.net/7CFAq/

Data only to click the div

Good morning, everyone.
I have a doubt. I have a list of div. textarea with text inside it and inside. text for a button event. Want to get only the data from the textarea div that the person clicking the button.
I would be very grateful for the help. thanks
Example code.
<div class="text">
<textarea id="texts" class="texts" rows="5" cols="45" name="textarea"> </ textarea>
<div class="bt" id="1234556">
<div class="button"> Send </div>
</div>
</div>
$('.button').click(function() {
var text = $('#texts').val();
// do something with text
alert(text);
});
Working demo at http://jsfiddle.net/PPcxm/
As long as you have the same structure (and presuming you have more than one example on the page as the button is a class and textarea is an id, the following would work:
$(".button").click(function()
{
var text = $(this).parent().prev().val();
});
Since you have a list of div.text your best bet is to query based upon the structure of your DOM.
$(".button").click(function() {
var $textArea = $(this).parents(".text").find(".texts");
//Do something with $textArea.Val();
});
What we simply do is call .parents() on the current div.button which will allow us to get the div.text element. From there you can simply find your textarea.texts element and get the corresponding value.
Code example on jsfiddle.

Categories