I need to change or create a div from an url parameters
<div class="myclass"></div>
www.example.com?change=newdiv
<div class="myclass" id="newdiv"></div>
Is it possible to do this with js?
yes you can do it like that :) :
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("change");
var element = document.getElementsByClassName("myclass");
element[0].setAttribute("id",c);
Basically you need to create new URL property using https, otherwise you will get a
TypeError: www.example.com is not a valid URL.
After that get the search parameter change and create a div where to set the id
const url = new URL('https://www.example.com?change=newdiv');
const changeParamValue = url.searchParams.get("change");
console.log("param value: " + changeParamValue)
let newDiv = document.createElement("div");
newDiv.setAttribute("id", changeParamValue);
console.log(newDiv)
Related
I am trying to create an image link based on the location of the server it is hosted on. If the server is server1. I want the image to be linked to http://server1/dod" I'm trying to get two images with this shot. However, nothing is loading. I am missing a piece and I don't know where. I'm also hosting this on an IIS server.
<!DOCTYPE html>
<html>
<body>
<div>
<p id="Images"></p>
</div>
<script>
var local = location.hostname;
//SP Edit, save a reference to the images node
var Images = document.getElementById("Images");
var dodlink = document.createElement(a);
dodlink.href = "http://" + local + "/DoD/";
var dodimg = document.createElement("img");
//SP Edit dodimg.src ="DOD.png";
//SP Edit dodimg.width = 256;
//SP Edit dodimg.height = 256;
dodimg.setAttribute("src", "DOD.png");
dodimg.setAttribute("width", "256px");
dodimg.setAttribute("height", "256px");
dodlink.appendChild(dodimg);
//SP Edit document.getElementByID("Images").innerHTML = dodimg;
Images.appendChild(dodimg);
var derlink = document.createElement(a);
//SP Edit derlink.href = "http://" + local + "/DER/";
deflink.setAttribute("href", "http://" + local + "/DER/");
var derimg = document.createElement("img");
//SP Edit derimg.src ="DER.png";
//SP Edit derimg.width = 256;
//SP Edit derimg.height = 256;
derimg.setAttribute("src", "DER.png");
derimg.setAttribute("width", "256px");
derimg.setAttribute("height", "256px");
deflink.appendChild(derimg);
//
Images.appendChild(deflink);
Try this:
var local = location.hostname;
var dodlink = document.createElement('a');
dodlink.href = "http://" + local + "/DoD/";
var dodimg = document.createElement("img");
dodimg.setAttribute("src", "DOD.png");
dodimg.setAttribute("width", "256");
dodimg.setAttribute("height", "256");
dodlink.appendChild(dodimg);
document.getElementById("Images").appendChild(dodlink);
var derlink = document.createElement('a');
derlink.href = "http://" + local + "/DER/";
var derimg = document.createElement("img");
derimg.setAttribute("src", "DER.png");
derimg.setAttribute("width", "256");
derimg.setAttribute("height", "256");
derlink.appendChild(derimg);
document.getElementById("Images").appendChild(derlink);
The image sizes are wrong. You need to specify the type eg
derimg.width = "256px";
instead of
derimg.width = 256;
also you are changing the
"innerHtml", which is wrong. You need to change the src of an IMG tag and then append it to the "innerHtml".
Also what value is 'a'? Since you've included a whole page I can't see 'a' defined.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
I get URL parameters using Javascript but i can't use those variables in my html.
the JS code is this:
<script>
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("name");
console.log(c);
</script>
and my URL is localhost:8000/something?name=ABC.here i can get the value of name and show it in the browser console but when i try to set the value of an input tag in my HTML it doesn't do it and raises some errors.
my JS and html is like:
<script>
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("name");
document.getElementById("user").value =url.searchParams.get("name");
</script>
<input id="user" value"">
this should have changed the value of the input tag but doesn't.
if your #user input is call before the DOM content is loaded,
document.getElementById("user").value
javascript can't find it so he try to set "value" of an undefined element
try this :
<input id="user" value="">
<script>
var url_string = window.location.href; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("name");
document.getElementById("user").value = c;
</script>
If you only have one URL parameter this will work. Just make sure that your input element is defined first.
A working copy JsFiddle static input
HTML
<input id="user" value="">
JS
var url = "localhost:8000/something?name=ABC" //replace with code to get url
var name = url.substring(url.indexOf("=") + 1);
document.getElementById("user").value = name;
If you need the input element to be defined after you get the URL parameter:
A working copy JsFiddle dynamic input
HTML
<div id="myDiv"> </div>
JS
var url = "localhost:8000/something?name=ABC" //replace with code to get url
var name = url.substring(url.indexOf("=") + 1);
var parent = document.getElementById("myDiv");
var input = document.createElement("input");
input.value = name;
parent.appendChild(input)
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();
<html:link href="DemoAction.do?method=val1¶m1=val2">DEMO</html:link>
How can i pass val1 and val2 from javascript ?
Add styleId="myLink" to the <html:link> in order to query the element with JavaScript.
Then you can do the following in JS:
var val1 = "newval1", val2 = "newval2";
// Option 1: Set the href attribute regardless of its current value
var link = document.getElementById("myLink");
link.setAttribute("href", "DemoAction.do?method="+val1+"¶m1="+val2);
// Option 2: Set the href attribute depending on its current value
var link = document.getElementById("myLink"),
hrefParts = link.getAttribute("href").split("?");
link.setAttribute("href", hrefParts[0]+"?method="+val1+"¶m1="+val2);
I have a url variable http://blah.com/blah/blah/blah and I have another url http://shop.blah.com/ I want to take the first url (blah.com) and add the ending blah/blah/blah to the second url http://shop.blah.com
So I end up with http://shop.blah.com/blah/blah/blah
Any idea of how I could do this?
var url1 = 'http://blah.com/blah/blah/blah';
var url2 = 'http://shop.blah.com/';
var newUrl = url2 + url1.replace(/^.+?\..+?\//, '');
It sounds like the jQuery-URL-Parser plugin might come in handy here:
var url = $.url(); //retrieves current url
You can also get specific parts of the URL like this:
var file = $.url.attr("file");
var path = $.url.attr("path");
var host = $.url.attr("host");
...
If you need to get Querystring parameters:
var parm = $.url.param("id");
If the intent is just to add shop to the front of the domain name:
var url2 = url1.replace('://', '://shop.');
<script>
$(document).ready(function(){
//this uses the browser to create an anchor
var blah = document.createElement("a");
//initialize the anchor (all parts of the href are now initialized)
blah.href = "http://blah.com/blah/blah/blah?moreBlah=helloWorld#hashMark";
var shop = document.createElement("a");
//initialize the anchor (all parts of the href are now initialized)
shop.href = "http://shop.blah.com/";
shop.pathname = blah.pathname; //the blahs
shop.search = blah.search; //the blah query
shop.hash = blah.hash; // the blah hashMark
alert("These are the droids you're looking for: "+shop.href);
});
</script>