I have three Pictures on a Website that are generated this way:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>AJAX</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="lib/css/stil.css" />
<script type="text/javascript" src="lib/js/ajaxeinsendeaufgabe2.js"></script>
</head>
<body>
<h1>Zusatzinformationen</h1>
<table>
<tr>
<td>
<img class="img" src="img/b1.jpg" />
</td>
<td id="info0"></td>
</tr>
<tr>
<td>
<img class="img" src="img/b2.jpg" />
</td>
<td id="info1"></td>
</tr>
<tr>
<td>
<img class="img" src="img/b3.jpg"/>
</td>
<td id="info2"></td>
</tr>
</table>
</body>
</html>
My Problem: how do i show text when i move with the mouse over one of the three images. Each Image must display unique text.
Here is an incomplete part of the Code:
var resOb = new XMLHttpsRequest ();
window.onload = function () {
document.getElementsByTagName("img").onmouseover =
function sndReq(i){
switch (i) {
case 0:
resOb.open('get', 'info0.txt', true);
break;
case 1:
resOb.open('get', 'info1.txt', true);
break;
case 2:
resOb.open('get', 'info2.txt', true);
break;
resOb.onreadystatechange = function (){
handleResponse (i);
}
How i can generate the text information for each image using onmouseover event?
Related
I want to get from the following html "only" the number 0 or the number 1 depending on which table row I click (FYI: there will be many rows with different numbers):
<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">
<script src="../static/js/test.js"></script>
<title>Document</title>
</head>
<body>
<table>
<tbody id="toAppend">
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">0</td>
<td class="p3">Joo: 1</td>
<td class="p3">9/22/2022, 5:02:30</td>
</tr>
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">1</td>
<td class="p3">Joo: 2</td>
<td class="p3">9/22/2022, 5:04:18</td>
</tr>
</tbody>
</table>
</body>
</html>
This is how it looks visually:
This is how the html looks in console view:
This is my javascript function:
function setUnstakeNumber() {
let selection = document.getSelection();
let finalSelection = selection.anchorNode.data
let activeTextarea = document.activeElement;
let parent = document.documentElement.parentElement; // Returns the <html> element
console.log(selection);
console.log(finalSelection);
console.log(parent);
console.log(activeTextarea);
}
But none of the above works.
The closest one is the finalSelection, but I need to really click exactly on top of the number I want rather then anywhere in its row.
How do I get the number by clicking anywhere in its element?
So If I would click anywhere in the first row I would get the number 0 and if I would click anywhere in the second row I would get the number 1 with only Vanilla Javascript (No JQuery)?
Try this!
function setUnstakeNumber() {
let selection = document.getSelection();
// get selected row
let selectedRow = selection.anchorNode.parentNode.parentNode;
let index = selectedRow.childNodes[3].innerText;
console.log(index);
}
<html>
<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">
<script src="../static/js/test.js"></script>
<title>Document</title>
</head>
<body>
<table>
<tbody id="toAppend">
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">0</td>
<td class="p3">Joo: 1</td>
<td class="p3">9/22/2022, 5:02:30</td>
</tr>
<tr class="newEle" onclick="setUnstakeNumber()">
<th>
"Stake No"
<div class="d-inline-block"></div>
</th>
<td class="p3 unstakeIdx">1</td>
<td class="p3">Joo: 2</td>
<td class="p3">9/22/2022, 5:04:18</td>
</tr>
</tbody>
</table>
</body>
</html>
First get the selected row and then select the which includes the index.
When I run the code nothings changes and nothing works, the JavaScript does not do anything not even run the alerts. The ranges in the HTML are supposed to go into a function that gets their value and outputs it to a <div>. That does not happen
This is the JavaScript
$(startup);
function startup(){
$("#speedRange").change(srange);
$("#LimitRange").change(lrange);
$("#ticketbtn").cick(findfine);
$("#ticketreset").click(reset);
}
var speed;
var limit;
function srange() {
speed = $("#speedRange").val();
speed = Number(speed);
$("#YourSpeed").html(speed);
function lrange() {
limit = $("#LimitRange").val();
limit = Number(limit);
$("#OverSpeed").html(limit);
function findfine() {
alert("ll")
}
function reset() {
alert("ll")
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Speeding Ticket Calculator</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Speeding Ticket Calculator</h1>
<table id="speedtable">
<tr>
<td>Select Your Speed<br>40 <input type="range" id="speedRange"> 160 </td>
<td><div id="YourSpeed"></div></td>
</tr>
<tr>
<td>Select The Speed Limit<br>40 <input type="range" id="limitRange"> 100 </td>
<td><div id="OverSpeed"></div></td>
</tr>
</table><br>
<a id="ticketbtn" class="button1">Calculate Penalty</a>
<a id="ticketreset" class="button1">Reset</a><br>
<br><br><br>
<div id="finebox">
</div>
<script src="script.js">
<p id="demo"></p>
</script>
</body>
</html>
This is the Html
Jquery On API to be used in latest version of jquery.
and some function braces where missing,
find the working snippet below.
$(document).ready(function(){
debugger;
startup();
});
function startup(){
debugger;
$("#speedRange").on('change',srange);
$("#limitRange").on('change',lrange);
$("#ticketbtn").on('click',findfine);
$("#ticketreset").on('click',reset);
}
var speed;
var limit;
function srange() {
debugger
speed = $("#speedRange").val();
speed = Number(speed);
$("#yourSpeed").html(speed);
}
function lrange() {
debugger
limit = $("#limitRange").val();
limit = Number(limit);
$("#overSpeed").html(limit);
}
function findfine() {
debugger
alert("ll")
}
function reset() {
debugger;
alert("ll");
$("#overSpeed").html('');
$("#yourSpeed").html('');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Speeding Ticket Calculator</h1>
<table id="speedtable">
<tr>
<td>Select Your Speed<br>40 <input type="range" id="speedRange"> 160 </td>
<td><div id="yourSpeed"></div></td>
</tr>
<tr>
<td>Select The Speed Limit<br>40 <input type="range" id="limitRange"> 100 </td>
<td><div id="overSpeed"></div></td>
</tr>
</table><br>
<a id="ticketbtn" class="button1">Calculate Penalty</a>
<a id="ticketreset" class="button1">Reset</a><br>
<br><br><br>
<div id="finebox">
</div>
<p id="demo"></p>
I am trying to get my variable I have saved to display on a table I have created on another page. I get the information from the user from a form, and have a button that is clicked and fires off to save the values into variables. My problem is that I can't change the inner html on the other page with the variable I have saved. I am using 1 js file and 2 html files. I can only use js/jquery, html, and css. here is my code:
loanpage.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Super Awesome Loan Guys</title>
<link rel="stylesheet" type="text/css" href="loanpage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="loanpage.js"></script>
</head>
<body>
<div class="bg" id="text-center">
<div class="companytitle"><span class="dollar">$</span>uper Awe<span class="dollar">$</span>ome Loan Guy<span class="dollar">$</span></div>
<div>
<form action="infopage.html">
<h4>Loan Amount:</h4>
<input type="text" id="loanamount" name="loanamount"><br>
<input type="radio" id="12month" name="time">12 Months
<input type="radio" id="18month" name="time">18 Months
<input type="radio" id="24month" name="time">24 Months
<h4>Name:</h4><input id="namefield" type="text" name="firstlastname">
<h4>Phone:</h4><input id="phonefield" type="text" name="phonennumber">
<h4>Email:</h4><input id="emailfield" type="text" name="email">
<h4>Zip Code:</h4><input id="zipfield" type="text" name="zipcode"><br>
</form>
<button type="button">Submit</button>
</div>
</div>
</body>
</html>
infopage.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Super Awesome Loan Guys Loan Information</title>
<link rel="stylesheet" type="text/css" href="loanpage.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="loanpage.js"></script>
</head>
<body>
<div class="bg" id="text-center">
<h1>Here is the info you submitted!</h1>
<table>
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Email Address</th>
<th>Zip Code</th>
<th>Loan Amount</th>
<th>Loan Duration</th>
<th>Interest</th>
</tr>
<tr>
<td id="displayName">1</td>
<td id="displayPhone">1</td>
<td id="displayEmail">1</td>
<td id="displayZip">1</td>
<td id="displayAmount">1</td>
<td id="displayDuration">1</td>
<td id="displayInterest">1</td>
</tr>
</table>
</div>
</body>
</html>
loanpage.js
//js code
var name = "";
var phone="";
var email="";
var zip="";
var loan=0;
var loanrate=12.0;
var loanlen=0;
//Jquery code
$(document).ready(function (){
$("#submitbutton").click(function(){
loan = parseFloat($("#loanamount").val());
if ($("#12month").is(':checked')){
loanlen = 12;
}
else if ($("#18month").is(':checked')){
loanlen = 18;
}
else if ($("#24month").is(':checked')){
loanlen = 24;
}
name = $("#namefield").val();
phone = $("#phonefield").val();
email = $("#emailfield").val();
zip = $("#zipfield").val();
document.getElementById("displayName").innerHTML(name);
document.getElementById("displayPhone").innerHTML(phone);
document.getElementById("displayEmail").innerHTML(email);
document.getElementById("displayZip").innerHTML(zip);
document.getElementById("displayAmount").innerHTML(loan);
document.getElementById("displayDuration").innerHTML(loanlen);
document.getElementById("displayInterest").innerHTML(loanrate);
});
});
Local Storage is your best bet.
// Save data to the current local store
localStorage.setItem("username", "John");
// Access some stored data
alert( "username = " + localStorage.getItem("username"));
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
function shareNaverBlog() {
var url = "http://blog.naver.com/openapi/share?url=" + getLinkUrl() + "&title=" + document.title;
window.open(url);
}
function getLinkUrl() {
var shareUrl = $("#shareButtons").attr("shareLinkUrl");
//alert($("#shareButtons").attr("shareLinkUrl"));
if ( location.href != shareUrl ) {
location.href = shareUrl;
}
if ( location.href == shareUrl ) {
return location.href;
}
}
This code is in the JavaSript about Sharing SNS function and a part of them.
$("#shareButtons").attr("shareLinkUrl");
==> That var is bring the URL at HTML file.
'shareLinkUrl' is the attribute of div that i defined.
And the value of 'shareLinkUrl' is "http://~test.html".
When i share URL through NaverBlog, however, linked another URL(not that value).
How to get defined URL ? Where is the wrong?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Test_sns_Slave</title>
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="//developers.kakao.com/sdk/js/kakao.min.js"></script>
<script src="http://nsk.dl.cdn.cloudn.co.kr/js/share.js"></script>
<script src="//scdn.line-apps.com/n/line_it/thirdparty/loader.min.js" ></script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div>
<table id="Table_01" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- http://nsk.dl.cdn.cloudn.co.kr 로 시작하는 절대경로로 설정. 500KB 이상일 경우, 카카오톡 공유 시, 이미지 표시 되지 않음 -->
<img src="http://nsk.dl.cdn.cloudn.co.kr/event/sharing_sns_test/images/am_letter_201605_no_05.jpg" width="100%" >
</td>
</tr>
<tr>
<td>
<div id="shareButtons" align="center" shareLinkUrl="http://nsk.dl.cdn.cloudn.co.kr/event/sharing_sns_test/test.html"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
Need your HTML.
Why don't you just use src?
I wish to have the array of inputs to be remembered using the local storage feature of html5. At the moment i can populate the array with weight inputs but once i refresh they disappear. Could anyone help me with this.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home Fitness</title>
<link type="text/css" rel="stylesheet" href="styles.css" />
<script>
var arrayX =10;
var arrayY =2;
var array=new Array(arrayX);
var arrayIndex=0;
for (x=0; x<array.length; x++)
{
array [x] = new Array(arrayY);
}
function insert(val1, val2){
if (arrayIndex >= arrayX)
{
alert("Recent Entries is Full");
return false;
}
array[arrayIndex][0]=val1;
array[arrayIndex][1]=val2;
arrayIndex++;
document.getElementById('weight1').value = '';
document.getElementById('unit').value = '';
}
function show() {
var string='<b>Weight Entries</b><br>';
for(i = 0; i < array.length; i++)
{
string+=''+array[i][0]+' '+array[i][1]+'<br>';
}
if(array.length > 0)
document.getElementById('myDiv').innerHTML = string;
}
</script>
</head>
<body>
<header>
<h1>Weight Tracker</h1>
</header>
<article>
<h2>Weight Input</h2>
<p>Please enter your current weight below and submit.</p>
</article>
<form name="form1">
<table align="center" width="407">
<tr>
<td width="154" align="right"><b>Weight</b> </td>
<td width="9"><b> :</b></td>
<td width="224">
<input type="integer" name="weight" id="weight1"/></td>
<tr>
<td width="154" align="right"><b>Unit (KG,Ibs, Stone)</b></td>
<td width="9"><b> :</b></td>
<td width="224">
<input type="integer" name="unit" id="unit"/></td>
</tr>
</table>
</br>
<table width="407">
<input type="button" value="Submit Weight"
onclick="insert(this.form.weight.value,this.form.unit.value);"/>
<input type="button" value="Recent Entries"
onclick="show();"/>
</table>
</form>
</br>
<div id="myDiv"></div>
<nav>
<ul>
<li>home</li>
</ul>
</nav>
just stringify your array and save it to localStorage when you are done.
localStorage["array"] = JSON.stringify(array)
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Template Index</title>
<style>
</style>
</head>
<body>
<div>
<input id="name"/>
</div>
<script>
window.addEventListener("beforeunload", function () {
var name = document.getElementById("name");
localStorage.setItem("name", name.value);
}, false);
window.addEventListener("load", function (){
var name = document.getElementById("name");
name.value = localStorage.getItem("name");
}, false);
</script>
</body>
</html>
the core code is above. you can make your own logic to accomplish your goal
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage