Я пытаюсь заставить кнопку «больше» отображать дополнительную информацию, не загружая всю страницу.Я посмотрел в Интернете и знаю, что могу использовать AJAX для этого, но я только начал изучать JavaScript, поэтому понятия не имею, как выполнять кодирование AJAX.Я не уверен, есть ли более простой способ обновить контент на веб-странице без загрузки сайта.Index.html - это основной файл (домашняя страница), а main_test.js - это файл javascript, который изменяет содержимое страницы.
Index.html:
<!DOCTYPE HTML>
<html lang="en-US">
<!--
Theory by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license
(templated.co/license)
-->
<html>
<head>
<title>ResuMaker</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="assets/css/main.css" />
<script type="text/javascript" src="main_test.js"></script>
</head>
<body>
<!-- Header -->
<header id="header">
<div class="inner">
<a href="index.html" class="logo">ResuMaker</a>
<nav id="nav">
<a href="index.html">HOME</a>
<a href="build.html">BUILD A RESUME</a>
<a href="login.html">SIGN IN/CREATE AN ACCOUNT</a>
<a href="resources.html">RESOURCES</a>
<a href="contacts.html">TALK TO US</a>
</nav>
<a href="#navPanel" class="navPanelToggle"><span class="fa fa-bars">
</span></a>
</div>
</header>
<!-- Banner -->
<section id="banner">
<h1>Welcome to Resumaker</h1>
<p> A free resume builder that helps you create professional resumes.</p>
</section>
<!-- One -->
<section id="one" class="wrapper">
<h1 style="text-align: center; font-size: 35px; font-weight : 500">How the<strong>ResuMaker </strong> works</h1>
<div class="inner">
<div class="flex flex-3">
<article>
<header>
<h2 style="text-align: center"> <strong> 1 </strong><br /></h2>
</header>
<p id="demo1" style="text-align: center"> You will input basic
information in the form input fields.</p>
<footer>
<div style="text-align:center">
<a href="#" onclick="howitworks_1()" class="button special">More</a>
</div>
</footer>
</article>
<article>
<header>
<h2 style="text-align: center"><strong> 2 </strong><br /></h2>
</header>
<p id="demo2" style="text-align: center">We will process your inputted
information from our website. </p>
<footer>
<div style="text-align:center">
<a href="#" onclick="howitworks_2()" class="button special">More</a>
</div>
</footer>
</article>
<article>
<header>
<h2 style="text-align: center"><strong> 3 </strong><br /></h2>
</header>
<p style="text-align: center" id="demo3">Then we let you select a
predefined resume template all with different fonts and designs</p>
<footer>
<div style="text-align:center">
<a href="#" onclick="howitworks_3()" class="button special">More</a>
</div>
</footer>
</article>
</div>
</div>
</section>
</body>
</html>
Main.js:
function saveFormAsTextFile()
{
var textToSave = 'First Name, Last Name, Email, Phone Number, Location,
LinkedIn, School Name\n'+
document.getElementById('first_name').value+","+
document.getElementById('last_name').value+","+
document.getElementById('user_email').value+","+
document.getElementById('phone_number').value+","+
document.getElementById('location').value+","+
document.getElementById('linkedin').value+ ","+
document.getElementById('school_name').value;
//---For CSV
var downloadLink = document.createElement('a');
downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURI(textToSave);
downloadLink.target = '_blank';
downloadLink.download = 'resume.csv';
downloadLink.onclick = destroyClickedElement;
downloadLink.style.display = "none";
document.body.appendChild(downloadLink);
downloadLink.click();
}
function destroyClickedElement(event)
{
document.body.removeChild(event.target);
}
function howitworks_1() {
document.getElementById("demo1").innerHTML =
"You will input basic information in the form input fields. We create your
resume when you input information such as personal information, educational
history, work experience and skills.";
}
function howitworks_2() {
document.getElementById("demo2").innerHTML =
"We will process the inputted information. The inputted information will be
collected, stored, converted and in turn generate arrays of information
which can be transformed into a resume.";
}
function howitworks_3() {
document.getElementById("demo3").innerHTML =
"Then we let you select a predefined resume template all with different
fonts and designs. Then, we will generate a resume based on your defined
template and all you to save it as a PDF, or Microsoft Word document.";
}