I have a field i my webshop that i would like to change to a link
<span id="m-product-customdata-data-" class="m-product-customdata-data-title">http://www.coaxconnectors.dk/searchresultcable.asp?CCType=-TL505&action=searchConnector </span>
Is there any way i Javascript to change this to a url?
Use this it will help you.
var a = document.createElement('a');
var linkText = document.createTextNode("my title text");
a.appendChild(linkText);
a.title = "my title text";
a.href = "http://example.com";
document.body.appendChild(a);
Related
I'm kinda tearing my hair out trying to modify the "UC" into a "UU" stored in my "url" variable.
I need to only replace the very first UC in the string, any subsequent match must be ignored
This is my code
(The commented line is what does not work sofar :( )
document.getElementById('btn').onclick = function() {
var val = document.getElementById('yturl').value;
var url = "https://www.youtube.com/embed/videoseries?list=" + val;
//var url = Str.replace('UC','UU');
var a = document.createElement('a');
var linkText = document.createTextNode(url);
a.appendChild(linkText);
a.title = "yturl";
a.target = '_blank';
a.href = url;
a.style.display = 'block';
document.body.appendChild(a);
}
<form>
<input type="text" id="yturl" value="UCn-K7GIs62ENvdQe6ZZk9-w" />
<input type="button" id="btn" value="ChannelPlayListURL" />
</form>
If replacing this string is to cumbersome,
"slicing" the first two charas and adding a "UU" would also work for me (but slicing didn't work either sadly)
Using String.prototype.replace() with plain string arguments will only replace the first occurrence.
You should also encode any query parameters correctly for use in a URL
const baseUrl = "https://www.youtube.com/embed/videoseries";
document.getElementById("btn").addEventListener("click", (e) => {
e.preventDefault(); // usually a good idea, especially around forms
// Creates a map of query parameters and encodes them when stringified
const query = new URLSearchParams({
list: document.getElementById("yturl").value.replace("UC", "UU"),
});
const url = `${baseUrl}?${query}`;
const a = document.createElement("a");
a.title = "yturl";
a.target = "_blank";
a.href = url;
a.append(url);
a.style.display = "block";
document.body.appendChild(a);
});
<form>
<input type="text" id="yturl" value="UCn-K7GIs62ENvdQe6ZZk9-w" />
<input type="button" id="btn" value="ChannelPlayListURL" />
</form>
Instead of //var url = Str.replace('UC','UU'); use url = url.replace('UC', 'UU')
or better yet:
var url = "https://www.youtube.com/embed/videoseries?list=" + val.replace('UC', 'UU');
You need to do the replacement before using val when assigning url.
document.getElementById('btn').onclick = function() {
var val = document.getElementById('yturl').value;
val = val.replace('UC', 'UU');
var url = "https://www.youtube.com/embed/videoseries?list=" + val;
var a = document.createElement('a');
var linkText = document.createTextNode(url);
a.appendChild(linkText);
a.title = "yturl";
a.target = '_blank';
a.href = url;
a.style.display = 'block';
document.body.appendChild(a);
}
<form>
<input type="text" id="yturl" value="UCn-K7GIs62ENvdQe6ZZk9-w" />
<input type="button" id="btn" value="ChannelPlayListURL" />
</form>
I want to create a linkable heading element by using Javascript. So far it creates an element but it doesn't contain link. Can someone tell me what's wrong?
function create2() {
var heading = document.createElement("H2");
var link = document.createElement("a");
link.href = "https://www.google.com";
heading.innerHTML = "Heading Test";
heading.appendChild(link)
document.body.appendChild(heading);
}
create2();
I've updated your code, you can use appendChild on heading.
Note: I am also using link.innerText instead of heading.innerHTML.
function create2() {
var heading = document.createElement("H2");
var link = document.createElement("a");
link.href = "https://www.google.com";
link.innerText = "Heading Test";
heading.appendChild(link)
document.body.appendChild(heading);
}
create2();
You need to add text to the link.
This is a bit ugly, but explains what you need.
function create2() {
var heading = document.createElement("H2");
var link = document.createElement("a");
var text = document.createTextNode('link text');
link.appendChild(text);
link.href = "https://www.google.com";
heading.innerHTML = "Heading Test ";
heading.appendChild(link)
document.body.appendChild(heading);
}
create2();
I want to display multi line text, from JavaScript to the HTML using looping. The text position is after display the image. The text result should be like
Place ..... // newline price ....
<div id="display">
<script type="text/javascript" src="../controler/package.js"></script>
</div>
var display = document.getElementById('display');
function buildImages(images,place,k,price){
var last=document.createElement("IMG");
last.src=images;
last.width=800;
last.height=600;
last.style.marginTop=30;
display.appendChild(last);
var x = document.createElement("H3");
var t = document.createTextNode("Place:"+place);
var z = document.createTextNode(" price:"+price);
x.appendChild(t);
x.appendChild(z);
display.insertBefore(x,display.childNodes[k]);
The cleanest way is probably to do the same thing you would do in HTML: wrap your text nodes in <p> elements.
Wrapping the text in an HTML element will always help you later to customize style or whatever!
Raw text nodes are not that convenient.
There are multiple ways to achieve this. One is using br tags
var x = document.createElement("H3");
var t = document.createTextNode("Place:"+place);
var br = document.createElement("BR");
var z = document.createTextNode(" price:"+price);
x.appendChild(t);
x.appendChild(br);
x.appendChild(z);
Another could be using a pre tag
var x = document.createElement("H3");
var t = document.createTextNode("Place:"+place + "\n price:" + price);
x.appendChild(t);
Or you could could use two spans that have display: block;
var x = document.createElement("H3");
var t = document.createElement("SPAN");
t.style.display = "block";
t.innerText = "Place:" +place;
var z = document.createElement("SPAN");
z.style.display = "block";
z.innerText = "Price:" +price;
var z = document.createTextNode(" price:"+price);
x.appendChild(t);
x.appendChild(z);
It can not work like this by design. if you do not use
<pre>
or
<code>
if you want to use line feeds or if you prefer other tags like
<p>
then you has to use at least
<br>
by this you can still format the text as you wish. Will look usually a bit messy. I would use a table.
http://jsfiddle.net/738wtmhs/1/
using above example in fiddle in my own project: for the purpose of this exercise I am using DOM methods to create and append the elements.
function GetFeatureProperties(feature) {
//add header to 1st FirstTabContent
var featureHeader = "<center><b> <FONT COLOR='FF6600'> Feature Properties </FONT> </b> </center> </br>";
var FirstTabContent = document.createElement('div');
FirstTabContent.id = "tabs-1";
FirstTabContent.innerHTML = featureHeader;
//Second Tab
var SecondTabContent = document.createElement('div');
SecondTabContent.id = "tabs-2";
var newImage = document.createElement("img");
newImage.src = "http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg";
newImage.width = "100";
newImage.height = "100";
SecondTabContent.appendChild(newImage);
//add li and ul
var DivHolding2Tabs = document.createElement('div');
DivHolding2Tabs.class = "shoptab";
var header2 = document.createElement('h2');
header2.innerHTML = "Feature";
DivHolding2Tabs.appendChild(header2);
var _ul = document.createElement('ul');
var _anchor1 = document.createElement("a");
_anchor1.href = "#tabs-1";
_anchor1.innerHTML = "Info";
var _li1 = document.createElement('li');
_li1.appendChild(_anchor1);
var _anchor2 = document.createElement("a");
_anchor2.href = "#tabs-2";
_anchor2.innerHTML = "Images";
var _li2 = document.createElement('li');
_li2.appendChild(_anchor2);
_ul.appendChild(_li1);
_ul.appendChild(_li2);
DivHolding2Tabs.appendChild(_ul);
DivHolding2Tabs.appendChild(FirstTabContent);
DivHolding2Tabs.appendChild(SecondTabContent);
var jelm = $(DivHolding2Tabs); //convert to jQuery Element
var htmlElm = jelm[0]; //convert to HTML Element
var OuterDiv = document.createElement('div');
OuterDiv.id = "loc-list";
OuterDiv.appendChild(htmlElm);
return OuterDiv.innerHTML;
}
and this looks like the image seen below....if I click on the link 'image' the page jumps a bit but nothing happens and nothing happens when I press 'info' also I have included the CSS in my project so why arnt the tabs showing and yes I am using jquery ui 1.10.3.custom.js
---------------------------------------------------------------------------------------------
UPDATE
<ul id="list"><li><div><h2>Feature</h2><ul><li>Info</li><li>Images</li></ul><div id="tabs-1"><center><b> <font color="FF6600"> Feature Properties </font> </b> </center> <br></div><div id="tabs-2"><img src="http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg" width="100" height="100"></div></div></li></ul>
Also changed from jquery 1.10.3 custom to jquery 1.11.2.custom with all the downloaded tabs selected
If you look at this fiddle, I managed to make it work.
Here's the possible problems
1) I changed return OuterDiv.innerHTML because I needed the <div id="loc-list"> to be part of the code to initialize it. You gave it an id so my guess is you wanted it to be included but by doing innerHTML, you didn't get it.
2) Once your function returns, you need to initialize the tabs with $('#loc-list').tabs();
I'm trying to add a link to a span of text using JavaScript below. Please could you help me with this issue.
<div id="features">
<h2>Features</h2>
<div id="emma2011_left">
<h2>Image of the Day</h2>
<div id="dImg">
<div id="dailyimg" class="feature"></div>
<div id="title" class="feature"></div>
<div id="caption" class="feature"></div><br />
<span id="span" class="feature"><a id="pidlink">Link to the object</a></span>
</div>
</div>
<script type="text/javascript">
...
link = document.createElement("a");
link.setAttribute("href", "http://example.com/index.aspx?objectid=" + oTodayImage.pid);
var span = document.createElement("span");
var txt = link.href;
var textNode = document.createTextNode(txt);
span.appendChild(textNode);
</script>
You're missing one step. You added the textnode to the span instead of the link. Then you should've put the link into the span...
var link = document.createElement("a");
link.setAttribute("href", "http://www.google.com");
var span = document.createElement("span");
var txt = link.href;
var textNode = document.createTextNode(txt);
link.appendChild(textNode);
span.appendChild(link);
//example of setting the link into a div on the page...
document.getElementById("div").appendChild(span);
$("<a/>").attr({href:"http://google.com"}).html("google").appendTo("#span");
here is the fiddle http://jsfiddle.net/wYdZb/1/
Instead of creating a text node you can also set the innerHTML of the link. And finally after you create this span you need to append it to some container, for now I have appended it to body.
Working demo
var link = document.createElement("a");
//here in the attribute value I have harded objectid=1 for testing
//replace it by your code to get the id and append it
link.setAttribute("href", "http://abc.org/index.aspx?objectid=1");
link.innerHTML = "Link to the object";
var span = document.createElement("span");
span.appendChild(link);
document.body.appendChild(span);
(function() {
var _a, _div, _span;
_span = document.createElement("span");
_a = document.createElement("a");
_div = (document.getElementsByTagName("div"))[0];
_a.setAttribute("href", "http://abc.org/index.aspx?objectid=");
_a.innerHTML = "Link to the object";
_span.appendChild(_a);
_div.appendChild(_span);
}).call(this);
to get the div element use some method;
must append span to the div element to show all elements.
example:http://jsfiddle.net/bz6bu/
use jquery's append:
var href = "http://abc.org/index.aspx?objectid=" + oTodayImage.pid;
$('#span').append("<a href='" + href + "'>test</a>") ;