#javascript #html #css
Вопрос:
Поэтому моя цель состоит в том, чтобы создать всплывающее окно, в котором можно было бы нажать, чтобы ввести код своей региональной школы в текстовое или числовое поле, чтобы узнать, имеют ли они право на публикацию файлов или нет.
например, если ваш код 11002, вы должны получить рекомендуемое сообщение, иначе сообщение с извинениями также я хотел бы иметь кнопку, которая может предложить пользователю вернуться и ввести новый код, если последний не принят. Все это должно быть на одной странице.
Ниже приведен мой код до сих пор, но я хочу отобразить результат в виде простого текста, а не в поле.
<style>
#result
{
width: 100%;
}
#btn1
{
float: right;
}
</style>
```
<script>
function locationlookup() {
var result = document.getElementById("areacode").value;
var schooling;
if (result == 11002) {
schooling = "Great! Your school is eligible for this course";
} else if (result == 11003) {
schooling = "Great! Your school is eligible for this course";
} else if (result == 11004) {
schooling = "Your school is eligible but you need good conduct certificate";
} else {
schooling = "Sorry. we currently do not serve in your entered location";
}
document.getElementById("result").value = schooling;
}
</script>
```
<table align="center">
<tr>
<th>School Area code: <input type="text" name="areacode" id="areacode" >
<button onclick="locationlookup()" id="btn1">Lookup</button>
</th>
</tr>
<tr>
<th>
<input type="text" name="result" id="result" readonly></th>
<!-- I wish to change the above field to a span so no limitations. but stuff don't
work for me -->
</tr>
</table>
Ответ №1:
Может быть, что-то вроде следующего фрагмента:
const input = document.querySelector("#areacode")
const span = document.querySelector("#result")
const btn = document.querySelector("#btnTryAgain")
function locationlookup() {
const result = input.value;
let schooling;
let results = [11002, 11003, 11004]
if (results.includes(Number(result))) {
schooling = "Great! Your school is eligible for this course"
} else {
schooling = "Sorry. we currently do not serve in your entered location"
btn.classList.toggle('hideBtn')
}
span.innerText = schooling;
}
function tryAgain() {
input.value = ''
span.innerText = '';
btn.classList.toggle('hideBtn')
input.focus()
} #result {
width: 100%;
}
#btn1 {
float: right;
}
.hideBtn {
display: none;
} <table align="center">
<tr>
<th>School Area code: <input type="text" name="areacode" id="areacode" >
<button onclick="locationlookup()" id="btn1">Lookup</button>
</th>
</tr>
<tr>
<th>
<span id="result"></span>
<button onclick="tryAgain()" id="btnTryAgain" class="hideBtn btn">Try again</button>
</th>
</tr>
</table> Комментарии:
1. Этот код работает здесь, но когда я копирую его на свою платформу wordpress, этого не происходит. Я попытался запустить его в основном с помощью блокнота и браузера Chrome, но он не отображает выходные данные.
2. Никаких сообщений об ошибках. Однако я нашел другой способ избежать исправления методом проб и ошибок, используя частичный код, предназначенный для какой-то другой проблемы. Я опубликую сообщение в ближайшее время
3. Мило, почему ты снимаешь галочку с моего ответа ?
Ответ №2:
Поэтому я нашел приведенное ниже описание проблемы, которое довольно удобно, но я хотел бы использовать описание Николы, если оно, наконец, сработает. вот код.
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
function locationlookup() {
var result = document.getElementById("areacode").value;
var locality;
if (result == 11002) {
locality = "Great! Your school is eligible for this course";
} else if (result == 11003) {
locality = "Great! Your school is eligible for this course";
} else if (result == 11004) {
locality = "Your school is eligible but you need good conduct certificate and more whatever text for the coding";
} else {
locality = "Sorry. we currently do not serve in your entered location";
}
const el = document.querySelector('div[contenteditable]');
el.addEventListener('input', () => console.log(el.textContent));
el.textContent = locality;
} /* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
background-color: black;
color: white;
padding: 5px 5px;
border: none;
cursor: pointer;
opacity: 1;
}
.spanishly3 {
text-align: left;
}
.spanishly2 {
float: right;
}
.bold2 {
font-size: 16px;
}
.spanishly3:before {
content: "";
display: block;
background: url("icon.png") no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0;
}
/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
/*bottom: 50%;*/
right: 50%;
border: 3px solid #f1f1f1;
z-index: 9;
}
/* Add styles to the form container */
.form-container {
max-width: 500px;
padding: 10px;
background-color: white;
}
/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit/login button */
.form-container .btn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
/* Add a red background color to the cancel button */
.form-container .cancel {
background-color: red;
}
/* Add some hover effects to buttons */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
div[contenteditable] {
border: 1px solid black;
width: 300px;
border: none;
font-weight: bold;
} <button class="open-button" onclick="openForm()"><div class="spanishly2"><span class="spanishly3" style="align: left;">hello</span><p><b class="bold2">Select Your Address</b></p></div></button>
<div class="form-popup" id="myForm">
<form action="/action_page.php" class="form-container">
Area code: <input type="text" name="areacode" id="areacode" placeholder="00000">
<button onclick="locationlookup()" id="btn1">Lookup</button>
<div contenteditable></div>
<p><i>or login to set/use your location</i></p>
<br>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit" class="btn">Login</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
<a href="chrome://settings/addresses" target="_blank">Manage addresses</a>
</form>
</div>