readout data- atribute with js - javascript

I whant to write Links in the data atribute and to save up code lines I whant to create the links with a standart text and the href of course with js/jquery
var mdUrl = $(".md")this.data('md');
$(this).html("YES click <a href='" + mdUrl + "'>here</a>");

If i understand it right, you want sth like this
<div class="md" data="coolsite.com">content.</div>
converted to:
<div class="md">content click here</div>
You could do this with the following js:
<script>
window.onload=function(){
mds=document.getElementsByClassName("md");
mds.forEach(function(md){
md.innerHTML=md.innerHTML+"<a href='"+md.data+"'> click here</a>";
});
};
</script>
This loops trough the elements with the "md" class and adds a link to their inner html

Related

add <a> tag into a class with javascript

i want to add link to label tag the code is this:
<div class="swatchinput">
<label selectid="pa_color" class="attribute_pa_color_black wcvaswatchlabel wcvasquare"</label>
<div>
how i can add <a href="test.com"> then close that with after </label> to make link.
i use this code with jquery but dosnt work fine
$(".swatchinput").before( "<a href='https://yenial.ir'>" );
$( "</a>" ).appendTo( ".attribute_pa_color_black" );
Looks like you don't understand how HTML, DOM, jQuery works. What you need to know is:
You cannot have improper nesting (like <a></label></a>, which is what you are asking for I believe).
There is no selector like $("</a>"). Any tag starting with / is an ending tag.
You cannot wrap <label> with <a>.
You haven't closed the <label>'s starting tag correctly.
You haven't closed the href attribute correctly.
You cannot have <a> inside <label> or vice-versa.
Still you may continue to do what you wanna do, but the browser will push it out. So, considering the above points, what you need is:
$(".swatchinput").wrapInner( "<a href='https://yenial.ir'>" ); // Or
$(".swatchinput").append( "<a href='https://yenial.ir'>" );
Working Snippet
$(function () {
$(".swatchinput").append( "<a href='https://yenial.ir'>" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="swatchinput">
<label selectid="pa_color" class="attribute_pa_color_black wcvaswatchlabel wcvasquare"></label>
</div>
But when the above code is run (append <a> into <label>), the browser makes it this way:

Add target blank to JavaScript generated link

The script is used in a php file and it diplays a linked alexa rank image:
<script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/t/a?url=x-invest.net"></script>
This is the result:
<a class="AlexaSiteStatsWidget" href="http://www.alexa.com/data/details/main?url=http://xxx">
<img alt="Alexa Certified Site Stats for xxx" src="http://xsltcache.alexa.com/site_stats/gif/t/a/eC1pbnZlc3QubmV0/s.gif" border="0">
</a>
I want to get target="_blank" in the < a > tag.
This is what i tried already:
<script>document.getElementsByClassName("AlexaSiteStatsWidget").setAttribute('target', '_blank');</script>
<script>$('#AlexaSiteStatsWidget a').attr('target', '_blank');</script>
But they both dont work.
Just change this:-
<script>document.getElementsByClassName("AlexaSiteStatsWidget").setAttribute("target","_blank");</script>
To this :-
<script>document.getElementsByClassName("AlexaSiteStatsWidget")[0].setAttribute("target","_blank");</script>
And remove this line :-
<script>$('#AlexaSiteStatsWidget a').attr('target', '_blank');</script>
I don't know if it's gonna work but if you create an event listener on your <body>'s <a>s elements like this:
<script type="text/javascript">
document.querySelector("body a.AlexaSiteStatsWidget").addEventListener("click", function() {
this.setAttribute("target", "_blank");
});
</script>
I didn't test it but i guess it gives you an idea of what i want to say
getElementsByClassName returns an array of all nodes (html elements) with the class name provided. If you only have one html element with the specified class, it will still return an array containing one node.
If you want to apply this to one <a> element use:
<script>
document.getElementsByClassName("AlexaSiteStatsWidget")[0].setAttribute('target', '_blank');
</script>
If want to apply this to multiple <a> elements:
<script>
var alexaArray = document.getElementsByClassName("AlexaSiteStatsWidget");
for(var i = 0; i < alexaArray.length; i++){
alexaArray[i].setAttribute('target', '_blank');
}
</script>

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 );
});

Click on img link to change text inside a div

I have a page with 4 images and a div box containing some text. When I click on one of the images I want the text to change to something else.
My goal is to be able to click on each image and get information about them without making an entirely different HTML just for a slight change in one div.
<script type="text/javascript">
function changeText(){
document.getElementById('MyDiv').innerHTML = 'New Text';}
</script>
<img src="images/about.jpg" onClick="changeText()">
<div class ="text" id="MyDiv"><p>Welcome blabla</p></div>
This is the code I've been trying to make it work but it doesn't. I'd like to code it in Javascript as well.
Do you mean information about the image itself? If you want for example the value of src or perhaps title or some other attribute, you could do something like:
<script type="text/javascript">
function changeText(obj){
var div=document.getElementById('MyDiv');
div.innerHTML='';
var p=document.createElement('p');
p.appendChild(document.createTextNode(obj.title + ' '+ obj.src));
div.appendChild(p);
}
</script>
<img src="images/about.jpg" title="About Something" onclick="changeText(this)" style="cursor: pointer;" />
<div class="text" id="MyDiv">
<p>Welcome blabla</p>
</div>
The p tag will be overwritten to include the title and src of the image (in this example)
use Jquery html function
$('myImgClass').html('myText');

How to see the source code of a particular html tag by onClick() javascript without showing its css?

Hi everyone,
here am trying to display the source code of a particular div by onclick
javascript function. But the result am getting is , when i click on the div, am seeing the
whole source code though am trying to make only the particular source code of a div to get
displayed. anyone please highlight me what am doing wrong here..! and what to do to make
it work in the way its expected.
<html>
<head>
<title></title>
<script type="text/javascript">
function viewsource(){
var oldHTML = document.getElementById('para').innerHTML;
var newHTML = "" + oldHTML + "";
var newHTML = newHTML.replace(/</g,"<");
var newHTML = newHTML.replace(/>/g,">");
var newHTML = newHTML.replace(/\t/g," ");
document.getElementById('para').innerHTML = newHTML;
}
</script>
</head>
<body>
<p id='para'><strong>This is my <span style="border: 1px solid #ccc;">test text</span> to check if it works</strong></p>
<input type='button' onclick='viewsource()' value='View Source'/>
</body>
</html>
Additional notes:
In the above code, when the button is clicked, the paragraph tag with the id of para will display...but it shows its css too. I want to display only the html tag without the css style attribute.
I don't want the content using innerHTML but i want the whole div including with the div id.(eg.)<div id='softros'><img src='/images/bgrade.jpg' /></div>
have you considered to just use inside your java script handler :
document.getElementById(YOUR_DIV_ID_GOES_HERE).innerHTML
You can get the HTML of the div using .innerHTML or .outerHTML but you need the encode it before you can display it. Otherwise the html gets renderd by the browser. In PHP you could use htmlencode javascript has no function for this but you could use this htmlencode.

Categories