Open in new tab JavaScript search - javascript

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>

Related

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

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>

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.

Make an active Hyperlinks for selected text in HTML textarea with java script

I'm trying to prepare a Javascript function that changes the "selected text" url to fully active HTML Hyperlinks.
My HTML code is:
<html>
<body>
<textarea id="my_input" cols="32" rows="16" textToDisplay>Some text with https://www.google.pl/?gws_rd=ssl for simple WYSIWYG function</textarea>
<input type="submit" value="[to url]" onclick="make_url('my_input')" />
</body>
</html>
My js function:
<script>
function make_url(my_input) {
var my_input=document.getElementById(my_input);
var selected_text=window.getSelection();
my_input.value=my_input_begin.value + ''+ selected_text +'' + my_input_end.value;
}
</script>
But after selecting https://www.google.pl/?gws_rd=ssl and pressing submit I get empty HTML Hyperlinks. What is wrong? window.getSelection() / document.getSelection() doesn't get the selected text.
The second question is - how to get my_input_begin.value and my_input_end.value or replace only "selected" part of my <textarea> entry?
I've sorted it out. The final Javascript code is:
function text_to_hyperlink(input_id) {
var text_entry = document.getElementById(input_id);
var text_selected;
// for IE
if (document.selection != undefined) {
text_entry.focus();
var sel = document.selection.createRange();
text_selected = sel.text;
}
// others browsers
else if (text_entry.selectionStart != undefined) {
var selection_pos_start = text_entry.selectionStart;
var selection_pos_end = text_entry.selectionEnd;
text_selected = text_entry.value.substring(selection_pos_start, selection_pos_end);
selection_prefix = text_entry.value.substring(0, selection_pos_start);
selection_sufix = text_entry.value.substring(selection_pos_end, text_entry.length );
}
text_entry.value = selection_prefix + '' + text_selected + '' + selection_sufix;
}
I replace all entry text_entry with HTML hyperlink code. But I didn't find how to easy replace the text_selected with text_selected
Final HTML:
<textarea id="my_input" cols="32" rows="16" textToDisplay>Some text with https://www.google.pl/?gws_rd=ssl for simple WYSIWYG function</textarea>
<input type="submit" value="[url]" onclick="text_to_hyperlink('my_input')"/>
Try this code:
<html>
<head>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
</head>
<body>
<textarea id="my_input" cols="32" rows="16" onclick="this.focus();this.select()">Some text with https://www.google.pl/?gws_rd=ssl for simple WYSIWYG function</textarea>
<p id="link"></p>
<input type="button" value="[to url]" onclick="make_url()" />
</body>
Click on the textArea first to get the text selected and then click on [to url] button.
<script>
function make_url() {
var textComponent = document.getElementById("my_input");
var selectedText;
// IE version
if (document.selection != undefined)
{
textComponent.focus();
var sel = document.selection.createRange();
selectedText = sel.text;
}
// Mozilla version
else if (textComponent.selectionStart != undefined)
{
var startPos = textComponent.selectionStart;
var endPos = textComponent.selectionEnd;
selectedText = textComponent.value.substring(startPos, endPos)
}
var link = document.getElementById("link");
var a = document.createElement("a");
var href = document.createTextNode("Link");
a.appendChild(href);
a.setAttribute("href", selectedText);
document.body.appendChild(a);
}
Note: Every time you add new text in the textArea and click on the [to url] button a new hyper link will be generated.Also i have used jquery library to select the so you have to attach it on the page.
Hope it works fine ☻

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