I have a link like following
<a id="dynamicLink" href="http://www.w3schools.com?userName=test">Visit W3Schools</a>
I would like to change the value of userName from test to test1.
How to do that using javascript?
could someone help me on this?
I suggest using a library to work with URIs. It will provide some consistency. Here is an example using URI.js:
// Get our <a> element
var l = document.getElementById('dynamicLink');
// Use URI.js to work with the URI
// http://medialize.github.io/URI.js/
var uri = URI(l.href);
// Get the query string as an object
var qs = uri.query(true);
// Change our value
qs.userName = 'test1'
// Update the URI object
uri.query(qs);
// Set our new HREF on the <a> element
l.href = uri;
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.15.2/URI.min.js"></script>
<a id="dynamicLink" href="http://www.w3schools.com?userName=test&someOtherKey=val">Visit W3Schools</a>
Try this:
document.getElementById("dynamicLink").href.replace("userName", "test1");
This should change the value of userName in href to test1
Related
I would like to populate a first name in the header of a webpage using a URL parameter. So if the URL is domain.com?name=Steve, the header would read: Hi there, Steve! I have the the below code working for that:
<html>
<body>
Hi there <span id="name"></span>!
</body>
</html>
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const name = urlParams.get('name');
document.getElementById("name").innerHTML = name;
</script>
How do I add a fallback value, say, "Hi there, Friend!", if the URL parameter is blank or missing altogether?
Thank you!
I've been unable to find a solution which works.
I believe you can make either the name variable itself dependent on the URL parameter being not "null" or blank, or set the innerHTML based on the same.
For example:
const name = urlParams.get('name') !== null ? urlParams.get('name') : 'Friend';
// OR
document.getElementById("name").innerHTML = name !== null ? name : 'Friend';
I have a webpage with a <select> tag called dropDown with selectable options 'OptionA', 'OptionB' and 'OptionC'.
It is possible for me to link to the webpage and call one of the options from the URL?
For example: smaple.aspx?dropDown=OptionB
You can get the GET parameter with JavaScript
let params = new URLSearchParams(document.location.search);
let dropDownValue = params.get("dropDown");
then change the select value with JavaScript(assume the select element has a id called a-dropdown)
document.getElementById('a-dropdown').value = dropDownValue;
So I'm very new to HTML and I was trying to take an txt output file, convert it into usable data, and input that data into HTML, changing various attribute values, like title and innerHTML
As an example, I was trying to use document.GetElementById("vars").search to reference the sequence of dna stored in search and set it to some button's title, but it wound up being undefined.
I'm really just confused on how to use variables, and if you have any idea as to what format I should make the file of data input for the HTML please share!
<script id = "vars" type = "text/javascript">
var seqId = "Chr23";
var search = "CCATGCGAATGCTGATATCGTAGCAAAAACACAGGGACGGTGCGAAAGAAGAGGGATTTTATTTTGTTTTCGCCTGGCAATTGAGTAATGGCCGGACTCCTTCACCTGACCAAGCAGTGCAGCATCCACCTACCCGCCCACTTGGGACGCGCGAAATGCTACACACTCGCTAAGGGACCGGGAACACACGTGCAGGCAAGAGTG";
</script>
As 'search' variable is a long string, you'd better use 'p' tag instead of 'button' tag.
try this:
var seqId = "Chr23";
var search = "CCATGCGAATGCTGATATCGTAGCAAAAACACAGGGACGGTGCGAAAGAAGAGGGATTTTATTTTGTTTTCGCCTGGCAATTGAGTAATGGCCGGACTCCTTCACCTGACCAAGCAGTGCAGCATCCACCTACCCGCCCACTTGGGACGCGCGAAATGCTACACACTCGCTAAGGGACCGGGAACACACGTGCAGGCAAGAGTG";
document.getElementById("p1").innerHTML=search;
<p id="p1">SearchContent</p>
`
Here's a rough example based on the
const seqId = "Chr23";
const search = "CCATGCGAATGCTGATATCGTAGCAAAAACACAGGGACGGTGCGAAAGAAGAGGGATTTTATTTTGTTTTCGCCTGGCAATTGAGTAATGGCCGGACTCCTTCACCTGACCAAGCAGTGCAGCATCCACCTACCCGCCCACTTGGGACGCGCGAAATGCTACACACTCGCTAAGGGACCGGGAACACACGTGCAGGCAAGAGTG";
document.onreadystatechange = function() {
if (document.readyState == "interactive") {
document.getElementById('myButton').innerHTML = search;
}
}
<button id="myButton">MyButtonTitle</button>
data in your question.
I want to know if an anchor link is clicked.
I add anchor links dynamically and set ids with their name file but i dont know how amoutn the number of the cell "clicked" in my Spreadshett.
For ex: the id of file "test.pdf" --> test;
in spreadsheet:
ex:
ColumA <namefile>: test.pdf
ColumB <linkfile>: https://docs.google.com/document/d/1PiMj.....jramcs
ColumC <cliked>: 1
I'm specting that if i clicked my anchor my function could know which anchor is cliked and amount " 1 " in colum C in the ppropriate row.
var html = app.createAnchor(nf, hf).setId(nf);
I am trying to make something like:
var html = app.createAnchor(nf, hf).setId(nf).addClickHandler(app.createServerHandler("sumDoc").addCallbackElement(flexTableDoc));
¿But how i know which anchor is cliked in the function sumDoc?
I think you can get that using client handlers and a textbox (this last one can be visible or not).
var clickedItem = app.createTextBox().setName('clickedItem')
On each anchor you add a clickHandler like this
var handler = app.createClientHandler().forTargets(clickedItem).setText(Anchorname);
anchor.addClickHandler(handler)
and in the server handler you will get the textBoxValue with
var clickedItem = e.parameter.clickedItem;
if you want a more accurate code you should provide the code you use to create the UI with the anchors
This is also possible and easy, format your anchor like you said.
var html = app.createAnchor(nf, hf).setId(nf).addClickHandler(app.createServerHandler("sumDoc").addCallbackElement(flexTableDoc));
Now your return function:
function sumDoc(e){
//this will return the value of the ID of the element thats clicked so in this case its test.pdf
var linkId = e.parameter.source;
}
I hope this is useful
I want to extract the image from server and store it in my local system. The image is displayed as background in <img> tag. How to extract and store the image. The actual image tag is given below
<img style="background:Url('..//contactdetails?data=4512354367432554')" src="some transparent image"/>
In the above tag image is being displayed as background and src contains some transparent image.
You need to perform a request for the image and then save it on your machine.
First get the URI of the image:
var html = #"<img style=""background:Url('..//contactdetails?data=4512354367432554')"" src=""some transparent image""/>";
var regex = new Regex(#"//(?<Path>[^']+)'", RegexOptions.Singleline)
var uri = regex.Match(html).Groups["Path"].Value;
EDIT
If you are using HtmlAgilityPack (given that you already extracted the a tag) you can use the Attributes collection to get the style attribute and perform a match against the regular expression or you can use directly the OuterHtml property to match against the pattern like this:
var anchorTag = YourCodeToGetTheAnchorTag();
var attribute = anchorTag.Attributes["style"];
var match = regex.Match(attribute.Value);
var uri = match.Groups["Path"].Value;
Or, using the OuterHtml property:
var anchorTag = YourCodeToGetTheAnchorTag();
var match = regex.Match(anchorTag.OuterHtml);
var uri = match.Groups["Path"].Value
Next, concatenate the uri of the image to the directory from server, and create a request:
var fullUri = "http://www.example.com/" + uri;
var request = (HttpWebRequest)WebRequest.Create(fullUri);
Get the response and save the image:
var response = request.GetResponse();
var image = Image.FromStream(response.GetResponseStream());
image.Save("path-on-your-machine");