Combine userinput and predefined phrase into url (to write into dom) - javascript

I want to combine userinput from a textfield with a preset url,
to then form a new url that is to be written into the dom below after pressing a button
My current code looks like this:
<body>
<form>
<input type="text" id="pixivurl" value="4165980"/>
<input type="button" id="btn" value="pixivuserid"/>
</form>
<html>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var val = document.getElementById('pixivurl').value,
src = ' val,
var link = document.getElementById("link");
var a = document.createElement('a');
var linkText = document.createTextNode("pixivuser");
a.appendChild(linkText);
a.title = "pixivuser";
a.href = "https://rsshub.app/pixiv/user/" + pixivuser";
document.body.appendChild(a);
}
</script>
</body>
</html>
The base url here is: https://rsshub.app/pixiv/user/
and it is supposed to have a numeral added right after, defined by userinpu.
(the default result in this case is https://rsshub.app/pixiv/user/4165980 )
I can't quite figure out the part to combine and then write into the dom below,
something might be missing ?

You just have some typing mistakes and then your code will work. The input with the id pixivurl has the user id. And you are getting it and assigning it to the href property of the link element. If you want the url to be also the text of the link element then put it in the textNode you have created.
<form>
<input type="text" id="pixivurl" value="4165980"/>
<input type="button" id="btn" value="pixivuserid"/>
</form>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var val = document.getElementById('pixivurl').value;
var url = "https://rsshub.app/pixiv/user/" + val;
var a = document.createElement('a');
var linkText = document.createTextNode(url);
a.appendChild(linkText);
a.title = "pixivuser";
a.href = url;
a.style.display = 'block';
document.body.appendChild(a);
}
</script>

Related

Open in new tab JavaScript search

I am trying to get my code to open a new tab in the browser rather than opening in the same tab, so I added target="_blank" after the href, but this doesn't work as I don't think it is being sent.
does anyone know how to fix this code so it works in a new window?
<script>
function changeText1(){
var userInput = document.getElementById('userInput').value;
var lnk = document.getElementById('lnk');
lnk.href = "https://www.google.co.uk/search?q=" + userInput ;
lnk.innerHTML = lnk.href;
window.location = "https://www.google.co.uk/search?q=" + userInput;
}
function changeText2(){
var userInput = document.getElementById('userInput').value;
var lnk = document.getElementById('lnk');
lnk.href = "https://www.dogpile.com/serp?q=" + userInput;
lnk.innerHTML = lnk.href;
window.location = "https://www.dogpile.com/serp?q=" + userInput;
}
function changeText3(){
var userInput = document.getElementById('userInput').value;
var lnk = document.getElementById('lnk');
lnk.href = "https://uk.search.yahoo.com/search?p=" + userInput;
lnk.innerHTML = lnk.href;
window.location = "https://uk.search.yahoo.com/search?p=" + userInput;
}
</script>
<input type='text' id='userInput' value=' ' />
<input type='button' onclick='changeText1()' value='google'/>
<input type='button' onclick='changeText2()' value='Dogpile'/>
<input type='button' onclick='changeText3()' value='Yahoo'/>
<a href="" target="_blank" id=lnk </a> <br>
I tried adding target to this bit but, it didn't work.
<a href="" target="_blank" id=lnk </a> <br>
Maybe try adding "window.open(url, '_blank').focus();" in your function blocks.
lnk.href = "https://uk.search.yahoo.com/search?p=" + userInput;
lnk.innerHTML = lnk.href;
window.open(lnk.href, '_blank').focus();
window.location = "https://uk.search.yahoo.com/search?p=" + userInput;
Hard to say, try this and let me know if it works ! ??
The a tag does not work as you are expecting. The a tag is used to encapsulate a link.
What would work for having the effect that you want is to refactor your functions to look like this:
function changeText1(){
var userInput = document.getElementById('userInput').value;
var url = "https://www.google.co.uk/search?q=" + userInput ;
window.open(url, '_blank').focus();
}
Using the open method of window
You can follow the examples below: (a, button) tags
document.getElementById('btn').onclick = function () {
window.open('https://www.google.com', "_blank");
}
Link
</br>
</br>
<button id="btn">button</button>

Open Appended URL in New Tab

I am working on a hub that allows me to put in a ticket number which is then appended to a URL so it opens directly in a ticketing system. I have this working. The final step is to have the ticketing system open in a separate tab.
Code
<form id="srs">
<input id="srbcp" name="srbcp" type="text">
<input type="button" onclick="pullsr('window.open')" value="Submit">
</form>
<script>
}
function pullsr() {
var action_src = $("#srbcp").val();
var srs = $("#srs");
var urlLink = "https://xxxxxxx.com/SR/";
var urlLink = urlLink + action_src;
console.log(urlLink);
location.href = urlLink;
}
</script>
replace
location.href = urlLink;
to
var win = window.open(urlLink, '_blank');
win.focus();
Hope it works for you.
You can do it by using window.open
Below is the code
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><form id="srs">
<input id="srbcp" name="srbcp" type="text">
<input type="button" onclick="pullsr()" value="Submit">
</form>
<script>
function pullsr() {
var action_src = $("#srbcp").val();
var srs = $("#srs");
var urlLink = "https://xxxxxxx.com/SR/";
var urlLink = urlLink + action_src;
console.log(urlLink);
//location.href = urlLink;
window.open(urlLink, "_blank");
}
</script>

How to assign Multiple line html code as a value to a javascript variable?

This my code..
<!DOCTYPE html>
<html>
<head>
<script>
function generate(){
document.getElementById("show").style.display = "block";
var name = document.getElementById("name").value;
var school_name = document.getElementById("school_name ").value;
var school_site= document.getElementById("school_site ").value;
var content= "<h2>Student Details:</h2>"+"/n"+
"<div align='justify'>
<p>"+name+"is studing in "+school_name+"</p>"+"/n"+
"<p>Visit site: <a href='http://"+school_site+"'>http://"+school_site+"</a></p></div>";
document.getElementById("displayarea").innerHTML = content;
}
</script>
</head>
<body>
Privacy Policy Page
<p>Name:</br> <input type="text" name="name" id="name"></p>
<p>School Website:</br> <input type="text" name="school_site" id="school_site"></p>
<p>School Name:</br> <input type="text" name="school_name" id="school_name"></p>
<button id="click" onclick="generate()">Generate</button>
<div style="display:none" id="show">
<div style="height:200px; width:540px; overflow:auto;" id="displayarea">
</body>
</html>
"content" is the javascript variable.
I need to assign HTML code as value for "content" variable,
And i also need to add some Javascript variable inside the HTML
code,
How to add javascript variable in html Hypertext link?
There are many ways to achieve this. For a simple use-case, you can use an array of string to perform work and at the end you can join with "" or "\n".
var template = [
"<h2>Student Details:</h2>",
"<div align='justify'><p>"+name+"is studing in "+school_name+"</p>",
"<p>Visit site: <a href='http://"+school_site+"'>http://"+school_site+"</a></p></div>"
].join("<br/>");
For more complex case, I will say use jquery or Plain JavaScript method. As given below.
function generate(){
document.getElementById("show").style.display = "block";
var name = document.getElementById("name").value;
var school_name = document.getElementById("school_name").value;
var school_site= document.getElementById("school_site").value;
//jQuery:
var node = $('<div></div>')
.hide()
.append($('<table></table>')
.attr({ cellSpacing : 0 })
.addClass("text")
);
//Plain JavaScript
var h2 = document.createElement("h2");
h2.textContent = "Student Details:";
var div = document.createElement("div");
var p1 = document.createElement("p");
p1.textContent = name+"is studing in "+school_name;
var p2 = document.createElement("p");
p2.textContent = "Visit site: ";
div.appendChild(p1);
div.appendChild(p2);
//add attribute node
var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);
//Once done return as string
return div.outerHTML;
}
You have extra space in id in school_name and school_site`.
So it is not being recognized and you are getting exception. Also your syntax to concatenate string is also incorrect.
var school_name = document.getElementById("school_name").value;
var school_site= document.getElementById("school_site").value;
Your full javascript code would be like this
<script>
function generate(){
document.getElementById("show").style.display = "block";
var name = document.getElementById("name").value;
var school_name = document.getElementById("school_name").value;
var school_site= document.getElementById("school_site").value;
var content= "<h2>Student Details:</h2>"+"/n"+
"<div align='justify'>"+
"<p>"+name+"is studing in "+school_name+"</p>"+"/n"+
"<p>Visit site: <a href='http://"+school_site+"'>http://"+school_site+"</a></p>";
document.getElementById("displayarea").innerHTML = content;
}
</script>
You can write a string on multiple lines using template literals, i.e. using the character " ` ".
You can easily integrate variables using ${yourVar} in the template literal
Example:
let lit = "literal";
var content = `This string
uses a template ${lit}`;
console.log(content);
Note: this is an ES6 feature, aka the not so new JavaScript that is not yet fully supported by browsers. To make this code compatible with older browsers, use a transpiler like babel
You have to use <br> instead of '/n' while assigning to javascript variable.
The problem as I see it is you have hit enter in the mid of string and you have extra space in the id selector.
Don't hit enter or use tilt ` to declare string instead of quotes.
<!DOCTYPE html>
<html>
<head>
<script>
function generate() {
document.getElementById("show").style.display = "block";
var name = document.getElementById("name").value;
var school_name = document.getElementById("school_name").value;
var school_site = document.getElementById("school_site").value;
var content = "<h2>Student Details:</h2>" +
"<div align='justify'><p>" + name + "is studing in " + school_name + "</p>" +
"<p>Visit site: <a href='http://" + school_site + "'>http://" + school_site + "</a></p></div>";
document.getElementById("displayarea").innerHTML = content;
}
</script>
</head>
<body>
Privacy Policy Page
<p>Name:</br>
<input type="text" name="name" id="name">
</p>
<p>School Website:</br>
<input type="text" name="school_site" id="school_site">
</p>
<p>School Name:</br>
<input type="text" name="school_name" id="school_name">
</p>
<button id="click" onclick="generate()">Generate</button>
<div style="display:none" id="show">
<div style="height:200px; width:540px; overflow:auto;" id="displayarea">
</body>
</html>
Suggestion : No need to use /n for new line, h2 is block element no need of break too.

Prompt user to download output as txt file

I'm looking for help w/ a script that will allow users to download the output from a text area (by prompting them to save it) by clicking on my "Export" button.
<textarea id="output" class="form-control text-box noresize" rows="4" placeholder="OUTPUT">
</textarea>
Closest I've gotten to an answer is this below, but obviously it's creating a file, not using my output:
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';
// Append anchor to body.
document.body.appendChild(a)
a.click();
// Remove anchor from body
document.body.removeChild(a)
Any help would be greatly appreciated.
Using your method, just pass the value of the textarea into the createObjectURL function.
<textarea id="output" class="form-control text-box noresize" rows="4" placeholder="This text will be downloaded as a file.">
</textarea>
<br>
<button id="download">Download</button>
<script>
document.getElementById('download').addEventListener("click", download);
function download(){
var text = document.getElementById('output');
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob([text.value], {type: 'text/plain'}));
a.download = 'test.txt';
document.body.appendChild(a)
a.click();
document.body.removeChild(a)
}
</script>
Try this:
var txt = document.getElementById('content').value;
document.getElementById('link').onclick = function(){
this.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(txt);
};
document.getElementById('content').onchange = function(){
txt = document.getElementById('content').value;
};
<body>
<div>
<textarea id="content">Hello World</textarea>
</div>
Download
</body>

document.getElementById returns null on a dynaimcally created div

Something weird is happening here.
My website is using javascript to create dynamic divs, but although they are entered into the DOM (at least this is what I think), javascript returns null when calling that div.
This is the javscript code which is loaded before </body>
function AddPlayer(){
var name = document.getElementById('name').value;
createBox(name);
};
function createBox(name){
var span = document.createElement('span');
span.id = name;
span.innerHTML = name;
document.getElementById("gameArea").appendChild(span);
var span = document.createElement('span');
span.id = "score-" + name;
span.innerHTML = "0";
document.getElementById("gameArea").appendChild(span);
var inputSText = document.createElement('input');
inputSText.type = "button";
inputSText.value = "Add Points";
inputSText.onclick = function(){AddPoints(name);};
document.getElementById("gameArea").appendChild(inputSText);
};
function AddPoints(player){
document.load(document.getElementById("#score-"+ player).innerHTML = "Please work");
};
<html>
<head>
<title>Game Score Keeper</title>
</head>
<body>
<h2>Game Score Keeper</h2>
<input type="text" id="name" />
<input type="button" value="Add Player" onclick="AddPlayer()" />
<div id="gameArea">
</div>
<script src="index.js"></script>
</body>
</html>
Here is the jsfiddle of this project http://jsfiddle.net/jwmm6rk7/
You need to pass the id of the element to document.getElementById. That is, without the hash (#) symbol.
function AddPoints(player) {
document.load(document.getElementById("score-" + player).innerHTML = "HELLO");
};
lookslike you were jQuery user, you used # and name instead of player
function AddPoints(player) {
document.getElementById("score-" + player).innerHTML = "HELLO";
};

Categories

Resources