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 );
});
Related
I am looking to change the color of some text when the page loads but I cannot get any code to run with the custom class.
the html class used as so:
<div class="metricCardData">
the java script that is supposed to change color of some of the child attributes:
$('.metricCardData').on('load', function(e) {
alert("hello")
var cssClass = this.getElementsByClassName('severity')[0].value.toLowerCase();
this.getElementsByTagName('h2')[0].className = cssClass
});
I have also tried the below but says load isnt a function
$('.metricCardData').load( function(e) {
alert("hello")
var cssClass = this.getElementsByClassName('severity')[0].value.toLowerCase();
this.getElementsByTagName('h2')[0].className = cssClass
});
That alert doesn't get displayed. When I change out load for "click" it works on click so load must not be an event. What event do I put there or how to I initialize that custom class on load?
EDIT the Desired html looks like
<div class="metricCardData">
<h4>Average Size</h4>
<h2 class="bad">19807.0</h2>
<p></p>
<input class="severity" type="hidden" value="BAD">
</div>
I check the input class "severity" for its value in this case BAD and i have a css class that is "bad" that I apply to the h2. These metricCardData are in a thymeleaf loop
You can use $(document).ready() of jquery, so that when the DOM loads in your browser then your script will be executed.
For example:
<div class="metricCardData">Test Text</div>
<script>
$(document).ready(function(){
$('.metricCardData').css('color','red');
});
</script>
If you want to do this using class, you can use below code
<div id='divId' class="metricCardData">Test Text</div>
<script>
$(document).ready(function(){
$('#divId').addClass('ChangeColorClass');
});
</script>
I have this HTML:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
</div>
and want to add more divs after the strong element to result:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
I am trying this:
var row_str = '<div>content here</div>';
$('#region_North_America div:last').html(row_str);
However, there is no change to the html. This is probably so since there is no div within the element selected.
I know that the js is making it to this code because I can print the content of row_str to the console.
So, how can I get to the end of that container element to add the new items?
Thx.
Try:
$("#region_North_America").append(row_str);
using append().
Or:
$("<div>content here</div>").appendTo("#region_North_America");
To create the element on the fly, and place it in the document.
Using the appendTo method.
Your code will just place html in the last div within #region_North_America. Use the append function.
$("div.region-list").append(row_str);
I have a contenteditable div where you type javascript which gets outputted into an empty script tag.
<div contenteditable="true" id="script-generator"></div>
<div id="save-script">Save</div>
<script type="text/shorthand" id="script">
</script>
So you write your script in the div, click save and I have some JS which gets the html of the contenteditable div and adds it to an empty script tag.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$('#script').html(script);
});
So far this works. But the generated script has no effect. The browser must not recognise the script because it wasn't there on page load? How do I make the script take effect without reloading the page?
Note: The type/shortand on the script is because I'm using a plugin which converts shortand words into actual Javascript. So the user would just need to write shorthand into the contenteditable div, and the plugin would convert that to JS. This might be adding to the problem?
I don't think it works to modify an existing <script> element. If you want the script to be executed you need to add a new element.
$('#save-script').click(function() {
var script = $('#script-generator').html();
$("#script").text(script);
ShortHand.parseScripts();
});
Correct - you need to create the script tag to have it execute after load.
$('head').append($('<script />', {html: script}));
...which means you can remove your empty script tag.
I have set up a test that's similar to what you have been looking for. Take a look and see if that helps.
Working Demo
Test code:
<div id="script" style="display:none">
alert(4+4);
</div>
<input id="sLoad" type="button" value="Load/Execute Script" />
$('#sLoad').click(function(){
//You may want to append to the head
$('<script/>').append( $('#script').html() ).appendTo('#script');
});
I'm trying to append a piece of text to a div using jQuery. I try to do this using the following code:
<html><head></head><body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sendButton").click(function(){
$("#conversation").append("<P>This is a message");
});
});
</script>
<div class="conversation"><p>some message</div>
<form><input type="button" id="sendButton" value="Send Message"></form>
</body></html>
Seeing the multitude of tutorials on the subject it seems to be such a simple thing to do, but I can't seem to figure out what I'm doing wrong here. Any help would be greatly appreciated.
You need to use class selector, As #conversation referes to element with id conversation
$(".conversation").append("<P>aergerag");
Fiddle DEMO
EDIT
You should look at this To Close or Not To Close Tags in HTML5 and a good question Closing tags in HTML5
replace # with . in your selector (conversation is a CLASS)
$(".conversation").append("<P>aergerag");
I am not any good at jQuery but from one of my projects I had to simply target the div with html as:
var someData = "This is a message";
$("#conversation").html(someData);
If some contents exists before this, then you can retrieve them, concatenate, and write it back into the target div.
I try to insert text after an <img> tag using javascript.
<div id="candy"><img src="candy.png" /> Insert text here!</div>
If I use document.getElementById('candy').innerHTML = "test"; the image disappears.
Can you help me?
That's because you're replacing the innerHTML with the text test. You're not appending the text.
Try:
var div = document.getElementById('candy');
div.innerHTML = div.innerHTML + 'test';
Taken from here.
Well, the img tag is part of the HTML inside the div, and if you replace the div's HTML you rewrite the img tag as well.
Perhaps you wanted something like this instead:
<div><img src="candy.png" /> <span id="candy">Insert text here!</span></div>
Use
var div = document.getElementById('candy');
div.insertAdjacentHTML('beforeend', 'test');
Reference: https://developer.mozilla.org/en/docs/DOM/element.insertAdjacentHTML
That is because you javascript changes the html inside the <img> tag to test. This doesn't work as <img /> is a self-closing tag.
I believe you could you jQuery to do what you are trying to however.