Example import found in js file
Please adjust it so that the code is saved in the js file
Hello Please Help Example import found in js file Please adjust it so that the code is saved in the js file
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>table</title>
</head>
<script>
function myim() {
a.innerHTML = import code in b.js
}
</script>
<body >
<div id="a" align="center">
</div>
<p>
<input type="button" name="go" id="bn" value="import" onclick="myim()"></p>
</body>
</html>
file b.js
<table border="1" cellpadding="0" style="border-collapse: collapse" width="80" dir="rtl">
<tr>
<td> <span lang="en">number</span></td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
You can use XMLHttpRequest in javascript to request data from the server.
file.open("GET", "b.js"); can be used to open the file.
file.responseText is used to get data from that file.
Note:
Use this code on web server (local or online) to avoid CORS policy in some browsers.
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>table</title>
</head>
<script>
function myim() {
var file = new XMLHttpRequest();
file.open("GET", "b.js");
file.onreadystatechange = function (){
content = file.responseText;
document.getElementById('a').innerHTML = content;
}
file.send(null);
}
</script>
<body >
<div id="a" align="center"></div>
<p><input type="button" name="go" id="bn" value="import" onclick="myim()"></p>
</body>
</html>
Thank you
Related
This is the page I currently have:
webpage
I am quite the beginner so bear with me!
I want to replace the column that says 'test' with data from a database through javascript. The first column can stay hardcoded in HTML, but the second column needs to be javascript. How would I go about this? Would the entire table have to be made in javascript or is there another way to fix this?
Current HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bedrijf</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<a href="./bedrijfslijst.html">
<button type="button" class="btnGedetailleerd">Terug</button>
</a>
<a href="./index.html">
<button type="button" class="btnGedetailleerd">Home</button>
</a>
<div id="title"></div>
<div id="containerDetails">
<table id="bedrijfDetails">
<tr>
<td>Naam</td>
<td>test</td>
</tr>
<tr>
<td>Sector</td>
<td>test</td>
</tr>
<tr>
<td>Ondernemingsnummer</td>
<td>test</td>
</tr>
<tr>
<td>Adres</td>
<td>test</td>
</tr>
<tr>
<td>Aantal werknemers</td>
<td>test</td>
</tr>
<tr>
<td>Omzet</td>
<td>test</td>
</tr>
<tr>
<td>Balanstotaal</td>
<td>test</td>
</tr>
<tr>
<td>Framework</td>
<td>test</td>
</tr>
<tr>
<td>B2B/B2C</td>
<td>test</td>
</tr>
<tr>
<td>Duurzaamheidsrapportering - percentage </td>
<td>test</td>
</tr>
<tr>
<td>Duurzaamheidsrapportering - score</td>
<td>test</td>
</tr>
</table>
</div>
</body>
<script src="./js/gedetailleerd.js" type="text/javascript"></script>
</html>
and js code:
function weergaveBedrijf(gekozenBedrijf) {
let title = document.getElementById("title");
let h1 = document.createElement("h1");
let text = document.createTextNode(`Gedetailleerd overzicht van "${gekozenBedrijf}"`);
h1.append(text);
title.append(h1);
};
let gekozenBedrijf = localStorage.getItem("zoekterm");
weergaveBedrijf(gekozenBedrijf)
Simple loop through rows, try this one:
const stringToFillSecondColumn = 'foo'
const lastColumn = document.querySelectorAll('#bedrijfDetails tr td:last-child')
for (const cell of lastColumn) {
cell.innerHTML = stringToFillSecondColumn
}
I want to make a JS function which can take the screenshot from element and then download it.
<body>
<h1>Sample text</h1>
<h2>Sample text</h2>
<table width="1080px" height="1920px" border="1" style="border-collapse:collapse">
<tbody><tr>
<td colspan="2">
<img src="https://inspectiondoc.com/wp-content/uploads/2014/08/sample-icon.png" width="600px">
</td>
<td>
Sample text
</td>
</tr>
<tr style="background:#b6ff00">
<td>
Sample text
</td>
<td>
Sample text
</td>
<td>
Sample text
</td>
</tr>
</tbody></table>
<h1>
sample text
</h1>
<h2>Sample text</h2>
<br><br>
<input type="button" value="Capture" onclick="capture()">
</body>
After clicking capture button I want this td colspan="2" element to be screenshoted and downloaded on jpg or png format.
Using html2canvas could help you, it converts an element into a canvas, and then you just need to add its data as a url into an a element
function download(canvas, filename) {
const data = canvas.toDataURL("image/png;base64");
const donwloadLink = document.querySelector("#download");
donwloadLink.download = filename;
donwloadLink.href = data;
}
html2canvas(document.querySelector(".card")).then((canvas) => {
// document.body.appendChild(canvas);
download(canvas, "asd");
});
Check a full example here https://codepen.io/koseare/pen/NWpMjeP
Try with html2canvas;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="all">
<h2>Sample text</h2>
<table width="1080px" height="1920px" style="border-collapse: collapse">
<tbody>
<tr>
<td colspan="2">
<img
src="https://inspectiondoc.com/wp-content/uploads/2014/08/sample-icon.png"
width="600px"
/>
</td>
<td>Sample text</td>
</tr>
<tr style="background: #b6ff00">
<td>Sample text</td>
<td>Sample text</td>
<td>Sample text</td>
</tr>
</tbody>
</table>
</div>
<br />
<input type="button" id="btn" value="Download" />
<script>
document.getElementById("btn").addEventListener(
"click",
function () {
var text = document.getElementById("all").value;
var filename = "output.txt";
download(filename, function makeScreenshot() {
html2canvas(document.getElementById("screenshot"), {scale: 1}).then(canvas => {
document.body.appendChild(canvas);
});
});
},
false
);
</script>
</body>
</html>
This question already has answers here:
How to use external ".js" files
(6 answers)
Closed 1 year ago.
Learning JS.. so bare with me.
When I call my function in tag in the HTML body it works without any issue, but if I try to put the data in an external .js file to keep the body clean (practicing for longer functions and functions commonly used) it does not function
Example HTML file snippet of the data:
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
</tbody>
</table>
<button type="button" onClick="getLoginValue();">Submit</button>
</body>
</html>
Example JS file
getLoginValue()
{
var enteredPassword = document.getElementById("password").value;
var enteredEmail = document.getElementById("email").value;
alert(enteredEmail+' '+enteredPassword);
}
Example of HTML file that works:
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
</tbody>
</table>
<button type="button" onClick="getLoginValue();">Submit</button>
<script>
function getLoginValue(){
var enteredPassword = document.getElementById("password").value;
var enteredEmail = document.getElementById("email").value;
alert(enteredEmail+' '+enteredPassword);
}
</script>
</body>
</html>
your external .js content should be :
function getLoginValue(){
var enteredPassword = document.getElementById("password").value;
var enteredEmail = document.getElementById("email").value;
alert(enteredEmail+' '+enteredPassword);
}
my page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
</tbody>
</table>
<button type="button" onClick="getLoginValue();">Submit</button>
</body>
</html>
login.js file:
function getLoginValue(){
var enteredPassword = document.getElementById("password").value;
var enteredEmail = document.getElementById("email").value;
alert(enteredEmail+' '+enteredPassword);
}
because your javascript Load before HTML，
you can put javascript before /body
or
use "onload()" wait HTML load
window.onload = function(){
getLoginValue()
{
var enteredPassword = document.getElementById("password").value;
var enteredEmail = document.getElementById("email").value;
console.log(enteredEmail+' '+enteredPassword);
}
}
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script type="text/javascript" src="login.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" name="email" id="email"></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
</tbody>
</table>
<button type="button" onClick="getLoginValue();">Submit</button>
</body>
</html>
I am taking in the data in from an sql statement and throwing it into a table.
I am trying to create a subtotal for the table that I can then send to a checkout page using a java servlet. Problem is that I am having issues getting the subtotal working after going through several examples on stackoverflow.
Thank you for your time.
<html>
<head>
<link rel="stylesheet" href="resources/css/main.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="resources/scripts/jquery-1.8.2.min.js"></script>
<title>Home Page</title>
</head>
<body>
<br>
<br>
<script>
(function (global) {
document.getElementById("output").value = global.localStorage.getItem("mySharedData");
}(window));
</script>
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/sakila"
user="root" password="nbuser"/>
<sql:query dataSource="${snapshot}" var="result">
Select F.title, (F.rental_rate * F.rental_duration) as 'Price'
from cart as C
join cartofitems as CI
on CI.cart_id = C.cart_id
join film as F
on CI.film_id = F.film_id
</sql:query>
<div align="center">
<table width="850" style="BACKGROUND-COLOR: #FFFFFF;" border="1">
<tr>
<td align="center">
<img src="images/cart.png">
</td>
</tr>
<tr>
<td align="center" colspan="3">
<table width="650">
<tr>
<td>
<div align="justify" style="color:#3e160e;">
This is a custom HTML header. This header may contain any HTML code, text,
graphics, active content such as dropdown menus, java, javascript, or other
content that you would like to display at the top of your cart pages. You create
custom HTML header yourself and specify its location in the CustomCart Administrator.
Also note the custom wallpaper (brown striped background), this is uploaded via the
administrator. You may change the wallpaper any time you wish to change the look of
your cart.
</div>
</td>
</tr>
</table>
</td>
<tr>
<tr>
</tr>
</table>
</div>
<div align="center">
<form action="checkout.jsp" method="post" border="">
<table width="850" border="1" class="cart">
<thead>
<tr>
<th>Action</th>
<th>Movie Title</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<c:forEach items="${result.rows}" var="cart">
<tr>
<td>Delete</td>
<td><c:out value="${cart.title}" /></td>
<td class="price"><c:out value="${cart.Price}" /></td>
</tr>
</c:forEach>
<tr class="totalColumn">
<td colspan="2" align="right" ><b>Subtotal: </b></td>
<td align="right" ><b><span id="subtotal"></span></b></td>
<script language="javascript" type="text/javascript">
var tds = document.getElementById('cart').getElementsByTagName('td');
var sum = 0;
for (var i = 0; i < tds.length; i++) {
if (tds[i].className == 'price') {
sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
}
}
document.getElementById('price').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';
</script>
</tr>
</tbody>
</table>
<table width="850" border="1">
<tr>
<div style="width:650px;">
<button type="submit" name="your_name" value="totalCost" class="loginbtn">Checkout Cart</button>
</form>
<p><form action="faces/index.xhtml" method="post">
<button type="submit" name="your_name" value="your_value" class="adminloginbtn">Back To Search</button>
</form>
</div>
</tr>
</tbody>
</table>
</body>
</html>
I have two html pages, in the index.html file, I have an button and an input textbox. I want the value in the textbox to show on the next page. how should i go about doing this, should i have two javascript file? or what?
Javascript:
$('#searchBtn').click(function(){
var search = document.getElementById('searchField');
document.getElementById("demo").innerHTML = search.value;
});
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/index.css" type="text/css" />
<title>The Lantzyfi Bay</title>
</head>
<body>
<div class="head">
<img class="logo" src="pics/logo.png">
</div>
<div class="body">
<form>
<div class="searchField">
<input id="searchField" type="text" placeholder="Lantzify Search" name="search" size="32"/>
<a id="searchBtn" class="search" href="results.html">Search</a>
</div>
<div class="checkboxes">
<input type="checkbox" name="music">Music</input>
<input type="checkbox" name="pics">Pics</input>
<input type="checkbox" name="videos">Videos</input>
<input type="checkbox" name="other">Other</input>
</div>
</form>
<div class="links">
Userpolicy
About
Lorem Ipsum
</div>
</div>
<script type="text/javascript" src="java/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="java/search.js"></script>
</body>
</html>
results.html:
<!DOCHTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/index.css" type="text/css" />
<link rel="stylesheet" href="css/results.css" type="text/css" />
<title>The Lantzyfi Bay</title>
</head>
<body>
<div class="head">
<form id="q">
<img class="logo" src="pics/logo.png">
<input id="searchField" type="text" placeholder="User serch" name="search" size="30"/>
<a id="searchBtn" class="search" href="results.html">Search</a>
</form>
</div>
<div class="content">
<h2>Serach: <!--Users Search word--></h2><h2 id="demo"></h2>
<div class="mainContent">
<table>
<thead>
<tr>
<th>Type</th>
<th>Name</th>
<th>DB</th>
<th>RP</th>
</tr>
</thead>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="java/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="java/search.js"></script>
</body>
</html>
You could add it to the URL and than read it on the other side.
Index.html would something like this:
$("#searchBtn").on('click', function () {
var url = "results.html?q=" + $("#searchField").val();
window.location = url
}
Result.html would have something like:
$(document).read(function () {
$("...").html(getParameterName('q'));
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
Credit for getParameterName function
NOTE:
You do have to note that this is not the proper way of doing things as you will have a lot of problems like url encoding, strings that are too long. This is however a good way to start. All the best.
Also I was using some jquery in the code. If this is a problem let me know and I can change it to do without
Only with a simple JS and HTML can not. By means of storing value and Timer (1) or SignalR (2) it could do this.
1, store value somewear ( database or cookies if just for actual user) and at some time refrest Result Page, by JS or outher, and read values.
2, SignalR Async refresh content of page, but you nead ASP.NET (MCV).
http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr#next
It appears two pages are served from the same origin.
localStorage is an option:
The Mozilla demo containing an example
If the first page has a reference to the window of the 2nd page, e.g. 2nd page is opened by calling window.open. window.postMessage is also an option, it also works for cross origin.
If the web server is also under your control, you can of course use the server as a transmitter by sending data back to server through ajax then let the server notify the 2nd page through Server Sent Event or Web Socket and etc.