I have project to make CV maker that can display user data that user filled in form.html and display it to CV_result.html . The problem is when form submitted and directed me to CV_result.html , data from user didnt show. I tried to check localStorage in console and i found localStorage is empty and got error message “Uncaught TypeError: Cannot read property ‘myPhoto’ of null at CV_result.html”. I search this problem all week and i cant found solution.
i come up with several method for example
1. try join form and CV in one page and the result is localStorage have data but cant display it to CV (getItem not work)2. try to separate each variable and display it then data not saved and display it null value.3. try using array and using JSON to save it then data still not saved and display it null value.
I attached my code below .
Thank you
**This my form html used for input data
“`
<form id=”regForm” action=”/CV_result.html”>
<!– One “tab” for each step in the form: –>
<fieldset>
<legend style=”text-align: center;”> Data Diri </legend>
<!– <label for=”myPhoto”>Select a file for photo profil:</label>
<input type=”file” id=”myPhoto” name=”myPhoto” required> –>
<input type=”text” placeholder=”Nama lengkap…” id=”fullName” name=”fullName” required>
<label for=”gender”>Jenis Kelamin</label>
<select id=”gender” id=”gender” name=”gender”>
<option value=”female”>Perempuan</option>
<option value=”male”>Laki-laki</option>
<option value=”secret”>Tidak ingin memberitahu</option>
</select>
<label for=”birthday”>Tempat dan Tangal lahir :</label>
<div class=”flex-container”>
<input style=”width: 50%;” type=”text” placeholder=”Tempat lahir…” id=”bornPlace” name=”bornPlace”
required>
<input style=”width: 50%;margin-left: 10px;” type=”date” id=”birthday” name=”birthday”>
</div>
<input type=”text” placeholder=”alamat domisili…” id=”address” name=”address” required>
<label for=”phone”>Nomor Telepon: </label>
<input type=”tel” placeholder=”+62″ id=”phone” name=”phone” required>
<label for=”email”>Alamat Email:</label>
<input type=”email” placeholder=”[email protected]” id=”email” name=”email” required>
<input type=”text” placeholder=”username dari github” id=”usernameGithub” name=”usernameGithub”>
<input type=”text” placeholder=”username dari Linkedin” id=”usernameLinkedin” name=”usernameLinkedin”>
<input type=”text” placeholder=”username dari Instagram” id=”usernameInstagram” name=”usernameInstagram”>
<textarea placeholder=” Beritahu sesuatu tentang dirimu” id=”summaryProfle” name=”summaryProfle”
style=”height:200px”></textarea>
<!– language –>
<fieldset>
<legend style=”text-align: center;”>Bahasa</legend>
<div class=”flex-container”>
<input style=”width: 50%;” type=”text” placeholder=”bahasa yang dikuasai” id=”languageName1″
name=”languageName1″></input>
<select style=”width: 50%;margin-left: 10px;” id=”languageLevel1″ name=”languageLevel1″>
<option value=”Beginner”>Pemula</option>
<option value=”Intermediate”>Menengah</option>
<option value=”Advanced”>Mahir</option>
</select>
</div>
<div class=”flex-container”>
<input style=”width: 50%;” type=”text” placeholder=”bahasa yang dikuasai” id=”languageName2″
name=”languageName2″></input>
<select style=”width: 50%;margin-left: 10px;” id=”languageLevel2″ name=”languageLevel2″>
<option value=”Beginner”>Pemula</option>
<option value=”Intermediate”>Menengah</option>
<option value=”Advanced”>Mahir</option>
</select>
</div>
</fieldset>
<fieldset style=”margin-top: 16px;”>
<legend style=” text-align: center;”> Hobi </legend>
<div class=”flex-container”>
<input type=”text” placeholder=”Hobi pertama” id=”hobby1″ name=”hobby1″>
<input type=”text” placeholder=”Hobi kedua” id=”hobby2″ name=”hobby2″>
<input type=”text” placeholder=”Hobi ketiga” id=”hobby3″ name=”hobby3″>
<input type=”text” placeholder=”Hobi Keempat” id=”hobby4″ name=”hobby4″>
</div>
</fieldset>
</fieldset>
<!– /* Tombol Submit */ –>
<button id=”submit” type=”submit” onclick=”setValue()” style=”margin-left: 45%;”> Submit </button>
</form>
<script>
function setValue(event) {
event.preventDefault();
//profile
var myPhoto = document.getElementById(“myPhoto”).value;
var fullName = document.getElementById(“fullName”).value;
var gender = document.getElementById(“gender”).value;
var bornPlace = document.getElementById(“bornPlace”).value;
var birthday = document.getElementById(“birthday”).value;
var address = document.getElementById(“address”).value;
var phone = document.getElementById(“phone”).value;
var email = document.getElementById(“email”).value;
var usernameGithub = document.getElementById(“usernameGithub”).value;
var usernameLinkedin = document.getElementById(“usernameLinkedin”).value;
var usernameInstagram = document.getElementById(“usernameInstagram”).value;
var summaryProfile = document.getElementById(“summaryProfile”).value;
// skill,language,hobbies
var languageName1 = document.getElementById(“languageName1”).value;
var languageLevel1 = document.getElementById(“languageLevel1”).value;
var languageName2 = document.getElementById(“languageName2”).value;
var languageLevel2 = document.getElementById(“languageLevel2”).value;
var hobby1 = document.getElementById(“hobby1”).value;
var hobby2 = document.getElementById(“hobby2”).value;
var hobby3 = document.getElementById(“hobby3”).value;
var hobby4 = document.getElementById(“hobby4”).value;
var UserData = {
myPhoto,
fullName,
gender,
bornPlace,
birthday,
address,
phone,
email,
urlFB,
urlGithub,
urlLinkedin,
urlInstagram,
summaryProfile,
languageName1,
languageLevel1,
languageName2,
languageLevel2,
hobby1,
hobby2,
hobby3,
hobby4,
}
console.log(“userData”, UserData);
alert(“Done”);
let jsnUserData = JSON.stringify(userData)
window.localStorage.setItem(“userData”, jsnUserData);
console.log(jsnUserData, “<<<<<<<=====”);
location = “CV_result.html”
}
</script>
**This my CV_result used for display data
“`
<body>
<div class=”academicInfo”>
<h3 class=”academicQual”>Data</h3>
<table class=”table”>
<tbody>
<!– <tr>
<th scope=”row”>myPhoto</th>
<td id=”myPhoto”></td>
</tr> –>
<tr>
<th scope=”row”>fullName</th>
<td id=”fullName”></td>
</tr>
<tr>
<th scope=”row”>gender</th>
<td id=”gender”></td>
</tr>
<tr>
<th scope=”bornPlace”></th>
<td id=”bornPlace”></td>
</tr>
<tr>
<th scope=”row”>birthday</th>
<td id=”birthday”></td>
</tr>
<tr>
<th scope=”row”>address</th>
<td id=”address”></td>
</tr>
<tr>
<th scope=”row”>phone</th>
<td id=”phone”></td>
</tr>
<tr>
<th scope=”row”>email</th>
<td id=”email”></td>
</tr>
<tr>
<th scope=”row”>usernameGithub</th>
<td id=”usernameGithub”></td>
</tr>
<tr>
<th scope=””>usernameLinkedin</th>
<td id=”usernameLinkedin”></td>
</tr>
<tr>
<th scope=”row”>usernameInstagram</th>
<td id=”usernameInstagram”></td>
</tr>
<tr>
<th scope=”row”>summaryProfile</th>
<td id=”summaryProfile”></td>
</tr>
<tr>
<th scope=”row”>languageName1</th>
<td id=”languageName1″></td>
<th scope=”row”>languageLevel1</th>
<td id=”languageLevel1″></td>
</tr>
<tr>
<th scope=”row”>languageName2</th>
<td id=”languageName2″></td>
<th scope=”row”>languageLevel2</th>
<td id=”languageLevel2″></td>
</tr>
<tr>
<th scope=”row”>hobby1</th>
<td id=”hobby1″></td>
<th scope=”row”>hobby2</th>
<td id=”hobby2″></td>
<th scope=”row”>hobby3</th>
<td id=”hobby3″></td>
<th scope=”row”>hobby4</th>
<td id=”hobby4″></td>
</tr>
</tbody>
</table>
</div>
<script>
const userObj = JSON.parse(window.localStorage.getItem(“userData”));
console.log(“userObj”, userObj);
document.getElementById(“myPhoto”).innerHTML = userObj.myPhoto;
document.getElementById(“fullName”).innerHTML = userObj.fullName;
document.getElementById(“gender”).innerHTML = userObj.gender;
document.getElementById(“bornPlace”).innerHTML = userObj.bornPlace;
document.getElementById(“birthday”).innerHTML = userObj.birthday;
document.getElementById(“address”).innerHTML = userObj.address;
document.getElementById(“phone”).innerHTML = userObj.phone;
document.getElementById(“email”).innerHTML = userObj.email;
document.getElementById(“urlFB”).innerHTML = userObj.urlFB;
document.getElementById(“urlGithub”).innerHTML = userObj.urlGithub;
document.getElementById(“urlLinkedin”).innerHTML = userObj.urlLinkedin;
document.getElementById(“urlInstagram”).innerHTML = userObj.urlInstagram;
document.getElementById(“summaryProfile”).innerHTML =
userObj.summaryProfile;
document.getElementById(“languageName1”).innerHTML =
userObj.languageName1;
document.getElementById(“languageLevel1”).innerHTML =
userObj.languageLevel1;
document.getElementById(“languageName2”).innerHTML =
userObj.languageName2;
document.getElementById(“languageLevel2”).innerHTML =
userObj.languageLevel2;
document.getElementById(“hobby1”).innerHTML = userObj.hobby1;
document.getElementById(“hobby2”).innerHTML = userObj.hobby2;
document.getElementById(“hobby3”).innerHTML = userObj.hobby3;
document.getElementById(“hobby4”).innerHTML = userObj.hobby4;
</script>
</body>
</html>
result for CV_result.html