i cannot pass my value from one html page to another html using href link. please help to suggest is there any way i can do to get the link ? following is my code:
page1 html
<!DOCTYPE html>
<html>
<head>
<title>Node.js app</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
Visit W3Schools!
</body>
</html>
page2 html
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
const urlParams = new URLSearchParams(window.location.search);
const PayValue = urlParams.get('value');
console.log(PayValue);
</script>
<h1>this is second page value:PayValue</h1>
</body>
</html>
Related
whenever I create a new document and use the boiler plate shortcut I end up having to change some lines of it, so my question is:
Is it possible to create a new boiler plate with just the information I want?
At least that way when I use the shortcut I won't need to change the boiler plate anymore.
What the boiler plate show:
<!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>
</body>
</html>
What i want:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
I'm trying to complete an exercise. In the exercise you create four files: index.html, home.html, about.html, and contact.html. Using jQuery's .load function, you are supposed to be able to use index.html as a template and load the other files within it (still seeing the index.html nav bar). Instead what is happening is the other html files appear to completely replace index.html in the browser. I can't figure out why. I am following the exercise instructions.
Here is the code:
index.html
<!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>Multi-Page Site & Template</title>
</head>
<body>
<nav>
Home
About
Contact
</nav>
<h1>Index Page</h1>
Here is where the Index Page is.
<div id="content">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-
u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script>
$(function() {
$("#content").load("home.html");
$("nav a").click(function() {
var href = $(this).attr("href");
$("#content").load(href);
return false;
});
});
</script>
</body>
</html>
home.html
<!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>Home Page</title>
</head>
<body>
<h1>Home Page</h1>
<p>
This is the home page. All content has been edited for brevity.
</p>
</body>
</html>
about.html
<!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>About Page</title>
</head>
<body>
<h1>About Page</h1>
<h2>Things to know about the About Page</h2>
<ol>
<li>It's named About Page</li>
<li>It has no styling</li>
<li>It's very short</li>
</ol>
</body>
</html>
contact.html
<!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>Contact Page</title>
</head>
<body>
<h1>Contact Page</h1>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Billy</td>
<td>Blazer</td>
<td>41</td>
</tr>
</table>
</body>
</html>
The exercise said the return false was supposed to prevent the other pages from replacing index.html. Why does that not work, or what else is wrong with the code?
Thanks!
Please change your code to below code:
In this way type="type/html" is changed to type="text/html"
$(function() {
$("nav a").click(function() {
var href = $(this).attr("href");
$("#content").html('<object type="text/html" data="'+ href +'">
</object>');
return false;
});
});
I have written a code using HTML to practise how to add a relative URL to the web page. But it doesn't work properly.
Folder structure for your project.
website(Main folder)
-links.html (html file)
-gb(Sub folder)
-currency-converter.html (html file)
links.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My first website</title>
</head>
<body>
<p>Let's start creating html links.</p>
Visits to I Love PDF
Visits to Currency Converter
</body>
</html>
currency-converter.html file inside the gb folder.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My second website</title>
</head>
<body>
<p>Welcome to currency converter page.</p>
</body>
</html>
I tried every configuration settings like CODE STYLE > FILE AND CODE TEMPLATES or HTML FORMAT SETTINGS ,but no matter what I did I can never reform this ,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="src/app.js"></script>
</body>
</html>
what I want is as below,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="src/app.js"></script>
</body>
</html>
My code style format for HTML is:
HTML Code formatting is configured in Settings | Editor | Code Style | HTML; to get the desired result, you need to remove html and body from Do not indent children of: list in Other tab:
I am trying to redirect to another page here and it will not go when I test it both files are in the same folder on my computer
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8/>
<meta http-equiv="refresh" content="4; url=home.html" />
</head>
<body>
<h1>Welcome to BlazeFirer's Website</h1>
</body>
</html>
other page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blazefirer</title>
</head>
<body>
hello
</body>
</html>
Close your charset meta tag properly, it's missing quotes afterwards.
<meta charset="UTF-8/>
Should be
<meta charset="UTF-8"/>