Call javascript function into a link when it is printed - javascript

I'm making a little application with intel xdk I have already passed id values from one page to another. My problem is when I print some links in html I can't pass value from the other page. I'm trying by this way:
<script>
document.write("<a href='#' onclick='sendID('page2.html', '21')'>Link</a>");
</script>
I have passed id value from one page to another but in this case I need to pass from a printed link. Is it possible or there is another way. Thanks!
Also I don't know if there is another way to call a function that receives parameters when the link is printed.
More information. Into my head tag:
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function sendID(dir, id)
{
dir +="?";
nomVec = id.split(",");
for (i=0; i<nomVec.length; i++){
dir += nomVec[i] + "=" + nomVec[i]+"&";
}
dir = dir.substring(0,dir.length-1);
location.href=dir;
}
</script>
</head>
And in my body tag:
<body>
Right link<br>
<br>
<br>
<script>
document.write("<a href='#' onclick='sendID(page2.html, 21)'>Link</a>");
</script>
</body>
In the first link the function is called and I get redirected to the other page, but in the printed link is doesn't work.

You have to do something like this
<body>
<script type="text/javascript">
function sendID(dir, id)
{
dir +="?";
nomVec = id.split(",");
for (i=0; i<nomVec.length; i++){
dir += nomVec[i] + "=" + nomVec[i]+"&";
}
return dir.substring(0,dir.length-1);
}
</script>
<script>
document.write("Link");
</script>
</body>
alternatively
you can also do a document.write(<<escape and put the sendID javascript function here>>) following by the document.write that prints the anchor tag.

<!DOCTYPE html>
<html>
<style type="text/css">
</style>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function sendID(dir, id)
{
dir +="?";
nomVec = id.split(",");
for (i=0; i<nomVec.length; i++){
dir += nomVec[i] + "=" + nomVec[i]+"&";
}
dir = dir.substring(0,dir.length-1);
location.href=dir;
}
</script>
</head>
<body>
click here
<br>
<br>
<script>
document.write("<a href='#' onclick='sendID(page2.html, 21)'>Link</a>");
</script>
</body>
</body>
</html>

Related

How do I output a variable from Javascript to html?

I want to inject text into a div using a variable. Here's a Stack Snippet of my code:
tDNA() {
var dna = prompt("Enter the DNA: ");
}
document.getElementById("dna").innerHTML = "DNA: " + dna;
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<src="main.js">
<div id="dna"></div>
</body>
</html>
function promp
You need to import your script like this
<script type="text/javascript" src="main.js"></script>
You can try this out.
HTML
<html>
<head>
</head>
<body>
<script defer src = "main.js"></script>
<div id = "dna">
<p></p>
</div>
</body>
</html>
JavaScript
function promptDNA(){
var dna = prompt("Enter the DNA: ");
d1 = document.querySelector("p");
d1.textContent = dna;
}
promptDNA();
Like this, you have to add the data to the HTML where the variable dna is in scope and then actually call the function
function promptDNA(){
var dna = prompt("Enter the DNA: ");
document.getElementById("dna").textContent = "DNA: " + dna;
}
promptDNA()
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="dna"></div>
<script src="main.js"></script>
</body>
</html>
Also, you're importing your script improperly.

How to gather the value of a specific <span> from a variable containing the complete web page code

I scraped a web page with the price of bitcoin and have the complete web page code stored in a variable. How do I extract the span:
<span class="text-large2" data-currency-value>8128.61</span>
from the whole code? By the way the number 8128.61 changes every time the page is refreshed as the price is updated
Here is my full code:
$.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('https://coinmarketcap.com/currencies/bitcoin/') + '&callback=?', function(data){
console.log(data.contents);
});
body {
background-color: lightblue;
}
<!DOCTYPE html>
<html>
<body>
<html lang="en">
<head>
<title>Web Scraper</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
</body>
you can use something like below to extract the value
$.getJSON('http://www.whateverorigin.org/get?url=' + encodeURIComponent('https://coinmarketcap.com/currencies/bitcoin/') + '&callback=?', function(data){
console.log($(data.contents).find('span[data-currency-value]').html());
});
you can do this without Jquery also
var htmlData = `your html`;
var divNode = document.createElement("div");
divNode.innerHTML = html;
after this you can access all HTML element which is inside htmlData
like
divNode.getElementsByClassName("test")

Using javascript to replace the html content

I am trying to replace the content of id='js' with javascript, but this is not working for me. here is the code.
<html>
<head>
<title></title>
<script type="text/javascript">
var ball = 0;
function count_balls(ball){
var count = ball + 1;
return count;
}
document.getElementById('js').innerHTML = count_balls(0);
</script>
</head>
<body>
<p id='js'>Result Here</p>
</body>
</html>
Because the element is not initialized yet, it's not working. You can either move the javascript to the end of the HTML (preferred) as shown below:
<html>
<head>
<title></title>
</head>
<body>
<p id='js'>Result Here</p>
<script type="text/javascript">
var ball = 0;
function count_balls(ball){
var count = ball + 1;
return count;
}
document.getElementById('js').innerHTML = count_balls(0);
</script>
</body>
Or you can use jquery document.ready to achieve the same thing.

Access iframe content on same domain

I'm trying to create a simple test to modify the content of an iframe from its parent container and to modify the content of the parent container from the iframe. Here's what I have so far:
first.html:
<!doctype html>
<html>
<head>
<title>First</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="shared.js"></script>
<script type="text/javascript" src="first.js"></script>
</head>
<body>
<h1>First</h1>
<iframe src="http://localhost:3000/second.html"></iframe>
</body>
</html>
second.html:
<!doctype html>
<html>
<head>
<title>Second</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="shared.js"></script>
<script type="text/javascript" src="second.js"></script>
</head>
<body>
<h1>Second</h1>
</body>
</html>
shared.js:
function modifyContent(targetContainerElement, targetSelector, sourceString) {
$(targetContainerElement).find(targetSelector).html("Modified by " + sourceString + "!");
}
first.js:
$(document).ready(function() {
var iframe = $("iframe");
modifyContent(iframe.contents(), "h1", "First");
});
second.js:
$(document).ready(function() {
if (!top.document)
return;
modifyContent(top.document.body, "h1", "Second");
});
To run the code, I use python -m SimpleHTTPServer 3000 and navigate to localhost:3000/first.html. The first header is modified and says "Modified by Second!" but the second header just says "Second". What am I missing here?
Try changing the h1 tag inside the iframe when it's completely loaded:
$(document).ready(function() {
var iframe = $("iframe");
iframe.load(function ()
{
modifyContent(iframe.contents(), "h1", "First");
});
});
Plus I think you should rewrite modifyContent :
function modifyContent(isJquery, targetContainerElement, targetSelector, sourceString)
{
if ( isJquery )
targetContainerElement.find(targetSelector).html("Modified by " + sourceString + "!");
else
$(targetContainerElement).find(targetSelector).html("Modified by " + sourceString + "!");
}
just targetContainerElement would work cause you don't really need to wrap it in $() since it's already a jquery object

Is it possible to open empty html popup with JS in it?

So we can do:
<html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function exitpop()
{
my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
//my_window.document.write('somehow add JS');
my_window.document.write('<h1>Popup Test!</h1><br/>');
my_window.document.write('J_\alpha(x) = \sum_{m=0}^\infty \frac{(-1)^m}{m! \, \Gamma(m + \alpha + 1)}{\left({\frac{x}{2}}\right)}^{2 m + \alpha} ');
}
</script>
<body onunload="javascript: exitpop()" >
<h1>JavaScript Popup Example 4</h1>
</body>
</html>
but how to for example add to header of that html page with something like <script type="text/javascript" src="path-to-MathJax/MathJax.js"></script> to enable MathML and tex formulas rendering?
Yep, you just need to concatenate the script tags, like so: jsfiddle demo
The money-shot code sample is:
jswin = window.open("", "jswin", "width=350,height=150");
jswin.document.write("Here's your popup!");
jswin.document.write('<scr'+'ipt>alert("Here\'s your alert()!");</scr'+'ipt>');
Use javascript to create a node named script, and sets it's attributes with javascript. Then append the node to document.head.
<html>
<head>
<title>JavaScript Popup Example 3</title>
</head>
<script type="text/javascript">
function exitpop()
{
var my_window = window.open("", "mywindow1", "status=1,width=350,height=150");
var head = my_window.document.getElementsByTagName("head").item(0);
alert(head.innerHTML);
var script = my_window.document.createElement ("script");
script.src = "a.js";
head.appendChild (script);
alert(head.innerHTML);
}
</script>
<body onunload="javascript: exitpop()" >
<h1>JavaScript Popup Example 4</h1>
</body>
</html>
You can consider using an iframe, you can set its head and body altogether, and you can put it in the window.

Categories