Я не могу создать текущий список со следующим кодом JavaScript
С помощью следующего кода я могу добавить список, который считывает данные из формы. Но я предполагаю создать текущий список, так что, если я изменю какой-либо ввод, при щелчке мыши будет создан другой список с обновленной информацией. Моя добавленная информация - это просто единственный список. Как можно составлять список добавляемых профилей при каждом обновлении. Пожалуйста помоги!
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous">
<title>Employee Profile</title>
</head>
<body>
<div class = "container">
<div class = "col-xs-6">
<form>
<div class = "form-group">
<label for = "name">Full Name *</label>
<input type = "text" class = "form-control" id = "name" placeholder = "Full Name" required>
</div>
<div class = "form-group">
<label for = "headline">Headline *</label>
<input type = "text" class = "form-control" id = "headline" placeholder = "Headline" required>
</div>
<div class = "form-group">
<label for = "position">Current Position</label>
<input type = "text" class = "form-control" id = "position" placeholder = "Current Position">
</div>
<div class = "form-group">
<label for = "spRegion">State/Province/Region *
</label>
<select class = "form-control" id = "spRegion" required>
<option>Please select</option>
<option value = "AL">Alabama</option>
<option value = "AK">Alaska</option>
<option value = "AZ">Arizona</option>
<option value = "AR">Arkansas</option>
<option value = "CA">California</option>
<option value = "CO">Colorado</option>
<option value = "CT">Connecticut</option>
<option value = "DE">Delaware</option>
<option value = "DC">District Of Columbia
</option>
<option value = "FL">Florida</option>
<option value = "GA">Georgia</option>
<option value = "HI">Hawaii</option>
<option value = "ID">Idaho</option>
<option value = "IL">Illinois</option>
<option value = "IN">Indiana</option>
<option value = "IA">Iowa</option>
<option value = "KS">Kansas</option>
<option value = "KY">Kentucky</option>
<option value = "LA">Louisiana</option>
<option value = "ME">Maine</option>
<option value = "MD">Maryland</option>
<option value = "MA">Massachusetts</option>
<option value = "MI">Michigan</option>
<option value = "MN">Minnesota</option>
<option value = "MS">Mississippi</option>
<option value = "MO">Missouri</option>
<option value = "MT">Montana</option>
<option value = "NE">Nebraska</option>
<option value = "NV">Nevada</option>
<option value = "NH">New Hampshire</option>
<option value = "NJ">New Jersey</option>
<option value = "NM">New Mexico</option>
<option value = "NY">New York</option>
<option value = "NC">North Carolina</option>
<option value = "ND">North Dakota</option>
<option value = "OH">Ohio</option>
<option value = "OK">Oklahoma</option>
<option value = "OR">Oregon</option>
<option value = "PA">Pennsylvania</option>
<option value = "RI">Rhode Island</option>
<option value = "SC">South Carolina</option>
<option value = "SD">South Dakota</option>
<option value = "TN">Tennessee</option>
<option value = "TX">Texas</option>
<option value = "UT">Utah</option>
<option value = "VT">Vermont</option>
<option value = "VA">Virginia</option>
<option value = "WA">Washington</option>
<option value = "WV">West Virginia</option>
<option value = "WI">Wisconsin</option>
<option value = "WY">Wyoming</option>
</select>
</div>
<div class = "form-group">
<label for = "country">Country * </label>
<select class = "form-control" id = "country" required>
<option>Please select</option>
<option value = "AF">Afghanistan</option>
<option value = "AX">Åland Islands</option>
<option value = "AL">Albania</option>
<option value = "DZ">Algeria</option>
<option value = "AS">American Samoa</option>
<option value = "AD">Andorra</option>
<option value = "AO">Angola</option>
<option value = "AI">Anguilla</option>
<option value = "AQ">Antarctica</option>
<option value = "AG">Antigua and Barbuda
</option>
<option value = "AR">Argentina</option>
<option value = "AM">Armenia</option>
<option value = "AW">Aruba</option>
<option value = "AU">Australia</option>
<option value = "AT">Austria</option>
<option value = "AZ">Azerbaijan</option>
<option value = "BS">Bahamas</option>
<option value = "BH">Bahrain</option>
<option value = "BD">Bangladesh</option>
<option value = "BB">Barbados</option>
<option value = "BY">Belarus</option>
<option value = "BE">Belgium</option>
<option value = "BZ">Belize</option>
<option value = "BJ">Benin</option>
<option value = "BM">Bermuda</option>
<option value = "BT">Bhutan</option>
<option value = "BO">Bolivia, Plurinational State of
</option>
<option value = "BQ">Bonaire, Sint Eustatius and Saba
</option>
<option value = "BA">Bosnia and Herzegovina
</option>
<option value = "BW">Botswana</option>
<option value = "BV">Bouvet Island</option>
<option value = "BR">Brazil</option>
<option value = "IO">British Indian Ocean Territory
</option>
<option value = "BN">Brunei Darussalam
</option>
<option value = "BG">Bulgaria</option>
<option value = "BF">Burkina Faso</option>
<option value = "BI">Burundi</option>
<option value = "KH">Cambodia</option>
<option value = "CM">Cameroon</option>
<option value = "CA">Canada</option>
<option value = "CV">Cape Verde</option>
<option value = "KY">Cayman Islands
</option>
<option value = "CF">Central African Republic
</option>
<option value = "TD">Chad</option>
<option value = "CL">Chile</option>
<option value = "CN">China</option>
<option value = "CX">Christmas Island
</option>
<option value = "CC">Cocos (Keeling) Islands
</option>
<option value = "CO">Colombia</option>
<option value = "KM">Comoros</option>
<option value = "CG">Congo</option>
<option value = "CD">Congo, the Democratic Republic of the
</option>
<option value = "CK">Cook Islands</option>
<option value = "CR">Costa Rica</option>
<option value = "CI">Côte d'Ivoire</option>
<option value = "HR">Croatia</option>
<option value = "CU">Cuba</option>
<option value = "CW">Curaçao</option>
<option value = "CY">Cyprus</option>
<option value = "CZ">Czech Republic
</option>
<option value = "DK">Denmark</option>
<option value = "DJ">Djibouti</option>
<option value = "DM">Dominica</option>
<option value = "DO">Dominican Republic
</option>
<option value = "EC">Ecuador</option>
<option value = "EG">Egypt</option>
<option value = "SV">El Salvador</option>
<option value = "GQ">Equatorial Guinea
</option>
<option value = "ER">Eritrea</option>
<option value = "EE">Estonia</option>
<option value = "ET">Ethiopia</option>
<option value = "FK">Falkland Islands (Malvinas)
</option>
<option value = "FO">Faroe Islands
</option>
<option value = "FJ">Fiji</option>
<option value = "FI">Finland</option>
<option value = "FR">France</option>
<option value = "GF">French Guiana
</option>
<option value = "PF">French Polynesia
</option>
<option value = "TF">French Southern Territories
</option>
<option value = "GA">Gabon</option>
<option value = "GM">Gambia</option>
<option value = "GE">Georgia</option>
<option value = "DE">Germany</option>
<option value = "GH">Ghana</option>
<option value = "GI">Gibraltar</option>
<option value = "GR">Greece</option>
<option value = "GL">Greenland</option>
<option value = "GD">Grenada</option>
<option value = "GP">Guadeloupe</option>
<option value = "GU">Guam</option>
<option value = "GT">Guatemala</option>
<option value = "GG">Guernsey</option>
<option value = "GN">Guinea</option>
<option value = "GW">Guinea- Bissau
</option>
<option value = "GY">Guyana</option>
<option value = "HT">Haiti</option>
<option value = "HM">Heard Island and McDonald Islands
</option>
<option value = "VA">Holy See (Vatican City State)
</option>
<option value = "HN">Honduras</option>
<option value = "HK">Hong Kong</option>
<option value = "HU">Hungary</option>
<option value = "IS">Iceland</option>
<option value = "IN">India</option>
<option value = "ID">Indonesia</option>
<option value = "IR">Iran, Islamic Republic of
</option>
<option value = "IQ">Iraq</option>
<option value = "IE">Ireland</option>
<option value = "IM">Isle of Man</option>
<option value = "IL">Israel</option>
<option value = "IT">Italy</option>
<option value = "JM">Jamaica</option>
<option value = "JP">Japan</option>
<option value = "JE">Jersey</option>
<option value = "JO">Jordan</option>
<option value = "KZ">Kazakhstan</option>
<option value = "KE">Kenya</option>
<option value = "KI">Kiribati</option>
<option value = "KP">Korea, Democratic People's Republic of
</option>
<option value = "KR">Korea, Republic of
</option>
<option value = "KW">Kuwait</option>
<option value = "KG">Kyrgyzstan</option>
<option value = "LA">Lao People's Democratic Republic
</option>
<option value = "LV">Latvia</option>
<option value = "LB">Lebanon</option>
<option value = "LS">Lesotho</option>
<option value = "LR">Liberia</option>
<option value = "LY">Libya</option>
<option value = "LI">Liechtenstein</option>
<option value = "LT">Lithuania</option>
<option value = "LU">Luxembourg</option>
<option value = "MO">Macao</option>
<option value = "MK">Macedonia, the former Yugoslav Republic of
</option>
<option value = "MG">Madagascar</option>
<option value = "MW">Malawi</option>
<option value = "MY">Malaysia</option>
<option value = "MV">Maldives</option>
<option value = "ML">Mali</option>
<option value = "MT">Malta</option>
<option value = "MH">Marshall Islands
</option>
<option value = "MQ">Martinique</option>
<option value = "MR">Mauritania</option>
<option value = "MU">Mauritius</option>
<option value = "YT">Mayotte</option>
<option value = "MX">Mexico</option>
<option value = "FM">Micronesia, Federated States of
</option>
<option value = "MD">Moldova, Republic of
</option>
<option value = "MC">Monaco</option>
<option value = "MN">Mongolia</option>
<option value = "ME">Montenegro</option>
<option value = "MS">Montserrat</option>
<option value = "MA">Morocco</option>
<option value = "MZ">Mozambique</option>
<option value = "MM">Myanmar</option>
<option value = "NA">Namibia</option>
<option value = "NR">Nauru</option>
<option value = "NP">Nepal</option>
<option value = "NL">Netherlands</option>
<option value = "NC">New Caledonia
</option>
<option value = "NZ">New Zealand</option>
<option value = "NI">Nicaragua</option>
<option value = "NE">Niger</option>
<option value = "NG">Nigeria</option>
<option value = "NU">Niue</option>
<option value = "NF">Norfolk Island
</option>
<option value = "MP">Northern Mariana Islands
</option>
<option value = "NO">Norway</option>
<option value = "OM">Oman</option>
<option value = "PK">Pakistan</option>
<option value = "PW">Palau</option>
<option value = "PS">Palestinian Territory, Occupied
</option>
<option value = "PA">Panama</option>
<option value = "PG">Papua New Guinea
</option>
<option value = "PY">Paraguay</option>
<option value = "PE">Peru</option>
<option value = "PH">Philippines</option>
<option value = "PN">Pitcairn</option>
<option value = "PL">Poland</option>
<option value = "PT">Portugal</option>
<option value = "PR">Puerto Rico</option>
<option value = "QA">Qatar</option>
<option value = "RE">Réunion</option>
<option value = "RO">Romania</option>
<option value = "RU">Russian Federation
</option>
<option value = "RW">Rwanda</option>
<option value = "BL">Saint Barthélemy
</option>
<option value = "SH">Saint Helena, Ascension and Tristan da Cunha
</option>
<option value = "KN">Saint Kitts and Nevis
</option>
<option value = "LC">Saint Lucia</option>
<option value = "MF">Saint Martin (French part)
</option>
<option value = "PM">Saint Pierre and Miquelon
</option>
<option value = "VC">Saint Vincent and the Grenadines
</option>
<option value = "WS">Samoa</option>
<option value = "SM">San Marino</option>
<option value = "ST">Sao Tome and Principe
</option>
<option value = "SA">Saudi Arabia
</option>
<option value = "SN">Senegal</option>
<option value = "RS">Serbia</option>
<option value = "SC">Seychelles</option>
<option value = "SL">Sierra Leone
</option>
<option value = "SG">Singapore</option>
<option value = "SX">Sint Maarten (Dutch part)
</option>
<option value = "SK">Slovakia</option>
<option value = "SI">Slovenia</option>
<option value = "SB">Solomon Islands
</option>
<option value = "SO">Somalia</option>
<option value = "ZA">South Africa
</option>
<option value = "GS">South Georgia and the South Sandwich Islands
</option>
<option value = "SS">South Sudan</option>
<option value = "ES">Spain</option>
<option value = "LK">Sri Lanka</option>
<option value = "SD">Sudan</option>
<option value = "SR">Suriname</option>
<option value = "SJ">Svalbard and Jan Mayen
</option>
<option value = "SZ">Swaziland</option>
<option value = "SE">Sweden</option>
<option value = "CH">Switzerland</option>
<option value = "SY">Syrian Arab Republic
</option>
<option value = "TW">Taiwan, Province of China
</option>
<option value = "TJ">Tajikistan</option>
<option value = "TZ">Tanzania, United Republic of
</option>
<option value = "TH">Thailand</option>
<option value = "TL">Timor-Leste</option>
<option value = "TG">Togo</option>
<option value = "TK">Tokelau</option>
<option value = "TO">Tonga</option>
<option value = "TT">Trinidad and Tobago
</option>
<option value = "TN">Tunisia</option>
<option value = "TR">Turkey</option>
<option value = "TM">Turkmenistan</option>
<option value = "TC">Turks and Caicos Islands
</option>
<option value = "TV">Tuvalu</option>
<option value = "UG">Uganda</option>
<option value = "UA">Ukraine</option>
<option value = "AE">United Arab Emirates
</option>
<option value = "GB">United Kingdom
</option>
<option value = "US">United States
</option>
<option value = "UM">United States Minor Outlying Islands
</option>
<option value = "UY">Uruguay</option>
<option value = "UZ">Uzbekistan</option>
<option value = "VU">Vanuatu</option>
<option value = "VE">Venezuela, Bolivarian Republic of
</option>
<option value = "VN">Viet Nam</option>
<option value = "VG">Virgin Islands, British
</option>
<option value = "VI">Virgin Islands, U.S.
</option>
<option value = "WF">Wallis and Futuna
</option>
<option value = "EH">Western Sahara
</option>
<option value = "YE">Yemen</option>
<option value = "ZM">Zambia</option>
<option value = "ZW">Zimbabwe</option>
</select>
</div>
<div class = "form-group">
<label for = "education">Education</label>
<input type = "text" class = "form-control" id = "education" placeholder = "Education">
</div>
<div class = "form-group">
<label for = "skills">Skills</label>
<input type = "text" class = "form-control" id = "skills" placeholder = "Skills">
</div>
<div class = "form-group">
<label for = "linkedIn">My LinkedIn URL</label>
<input type = "text" class = "form-control" id = "linkedIn" placeholder = "Your Link to Linked In">
</div>
<button type = "submit" class = "btn btn-primary">Create a Job
Profile</button>
<!-- <button type = "button" class = "btn btn-
danger">Cancel</button> -->
</form>
</div>
</div>
<div class = "col-xs-12">
<div class = "well">
<div id = "output">
<!-- form input goes here -->
</div>
<!-- <button type = "button" class = "btn btn-
danger">Cancel</button> -->
</div>
<button type = "button" class = "btn btn-danger">Delete</button>
</div>
</div>
<!-- </div> -->
<script src = "https://code.jquery.com/jquery-2.2.4.min.js" integrity = "sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44 = " crossorigin = "anonymous"></script>
<script src = "http://sabioapi2.azurewebsites.net/scripts/sabio.js">
</script>
<script type = "text/javascript">
sabio.page.startUp = function() {
$('button[type = "submit"]').on('click', sabio.page.handlers.writeHtml);
$('button.btn-danger').on('click', sabio.page.hideCar);
};
sabio.page.handlers.writeHtml = function(event) {
event.preventDefault();
// $('#output').show();
var name = $('#name').val();
var headline = $('#headline').val();
var position = $('#position').val();
var spRegion = $('#spRegion').val();
var country = $('#country').val();
var education = $('#education').val();
var skills = $('#skills').val();
var linkedIn = $('#linkedIn').val();
$('#output').html(
'<ul style = "list-style: none;">' +
'<li>' + name + '</li>' +
'<li> Headline:' + headline + '</li>' +
'<li> Current Position:' + position + '</li>' +
'<li> Location' + spRegion + '</li>' +
'<li> Country' + country + '</li>' +
'<li> Education:' + education + '</li>' +
'<li> Skills:' + skills + '</li>' +
'<li>' + linkedIn + '<a href = "https://www.something.com">LinkedIn Profile</a>' + '</li>' +
'</ul>');
// $('#output').append('<div><span>make:' +name+
// '</span></div><div><span>Headline: ' +headline+
// '</span></div><div><span>Current Position: ' +position+
// '</span></div><div><span>Location: ' +spRegion+
// '</span></div><div><span>Country: ' +country+
// '</span></div><div><span>Education: ' +edcation+
// '</span></div><div><span>Skills: ' +skills+
// '</span></div><div><span>LinkedIn: ' +linkedIn+'<a href = "https://www.something.com">LinkedIn Profile</a>'
// );
$('form')[0].reset();
};
sabio.page.hideCar = function() {
$('#output').hide();
};
</script>
</body>
</html>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
40
1
Ответы 1
из вашего вопроса, я думаю, это то, что вы хотите. Закройте выходной div (удалите комментарии) <div id = "output"></div>
и используйте if else для вашего js-кода
if (!$('#output').html().length) {
$('#output').html(
'<ul style = "list-style: none;">' +
'<li>' + name + '</li>' +
'<li> Headline:' + headline + '</li>' +
'<li> Current Position:' + position + '</li>' +
'<li> Location' + spRegion + '</li>' +
'<li> Country' + country + '</li>' +
'<li> Education:' + education + '</li>' +
'<li> Skills:' + skills + '</li>' +
'<li>' + linkedIn + '<a href = "https://www.something.com">LinkedIn Profile</a>' + '</li>' +
'</ul>');
}else{
$('#output').append('<div><span>make:' +name+
'</span></div><div><span>Headline: ' +headline+
'</span></div><div><span>Current Position: ' +position+
'</span></div><div><span>Location: ' +spRegion+
'</span></div><div><span>Country: ' +country+
'</span></div><div><span>Education: ' +education+
'</span></div><div><span>Skills: ' +skills+
'</span></div><div><span>LinkedIn: ' +linkedIn+'<a href = "https://www.something.com">LinkedIn Profile</a>'
);}
Другие вопросы по теме
Создание плеера Spotify на стороне клиента
Маршрутизатор Vue не поддерживает структуру URL-адреса подкаталога (или относительного пути) при навигации по маршрутам
Google earth engine filterdate игнорируется сюжетом?
Понимание .map и Stringify с объектами
Приложение Next.js React не отображает содержимое пользовательского компонента
Должен ли я всегда использовать эффект `call` redux-saga для функций, возвращающих обещание?
Листовка Рисование «Невозможно прочесть свойство 'enable' of undefined» добавление элемента управления к слою geoJSON
Navigator.mediaDevices.getDisplayMedia не поддерживается
Reduce () объект элемента, который уже был уменьшен
Карта мозаики, которую я создал в Tiled, не загружается в браузере
Похожие вопросы
Кнопка JS срабатывает только по первому элементу
Получить поле из API на brightspace
Потеря данных при обновлении браузера в приложении Vue.js
Невозможно прочитать свойство toString для undefined в Multer
Разбить байты случайным образом с мин. / Макс
Пользователь нажимает слишком быстро ошибка
Изменение логического атрибута в объекте состояния React
Аксиос поставить не происходит бросать запрещено
Почему React native redux reducer вызывается иногда дважды, а иногда и только один раз?
Сохранение пользовательского ввода в PHP для последующего использования в функции Javascript