function check_email() {
var at_present = false;
var email = document.getElementById("email").value;
if (email !== "") {
for (let i = 0; i <= email.length; i++) {
if (email[i] === "#") {
at_present = true;
break;
}
}
if (at_present == false) {
alert("Invalid email! # missing");
}
}
}
h1 {
text-align: center;
}
.background {
background-image: url("https://firebasestorage.googleapis.com/v0/b/diffusion-library.appspot.com/o/soldiers-at-a-distance-fighting-in-a-savana-biome-high-quality-little-blurred%2F1.jpg?alt=media&token=559b6e72-c738-4b56-889c-d4ad6466548d");
background-size: 1600px;
position: center;
background-position-y: -300px;
filter: blur(8px);
}
<!DOCTYPE html>
<html>
<head>
<title>MODULO ISCRIZIONE SOFTAIR</title>
<link rel="stylesheet" href="Modulo_softair_css.css">
</head>
<body>
<div class="background"></div>
<h1>MODULO ISCRIZIONE SOFTAIR</h1>
<div class="content">
<strong>Nome:</strong>
<br>
<input type="text" id="nome">
<br>
<br>
<strong>Numero di Telefono:</strong>
<br>
<input type="text" id="telefono">
<br>
<br>
<strong>Email:</strong>
<br>
<input type="text" id="email" onchange="check_email()">
</div>
<script>
</script>
</body>
</html>
The background isn't loading I don't know why. Before adding the div and class the background was loading correctly. Can somebody help me figure out why? This program is meant to be a web page for a form about softair, and I wanted to add a photo to the background with a blurred effected so that it wouldn't disturb. As I said before, I had the background in the body without the div, but when I tried to blur, it blurred the whole body. So i made the class but now it isn't working.
Thanks
Tried removing some adjectives form the css but I had no luck.
Related
Trying to make my first project with bunch of pictures, with a filter/search bar at the top that would filter the pictures depending on the input. For example if the input would be "Aatrox", it would show "Aatrox" and not "Jayce" and or "Senna" and so on. Script was working fine, I added a .toLowerCase() so its not case sensitive and then I added to the pictures so they are clickable and each lead to their own page. After adding these two the search bar stopped working.
Here is the snippet of the script
<script>
function search(){
var searchText = (document.getElementById("searchInput").value).toLowerCase();
var images = document.querySelectorAll(".image_container > img");
if(searchText.length > 0){
images.forEach((image) => {
image.classList.add("hide");
if((image.dataset.tags).toLowerCase().indexOf(searchText) > -1){
image.classList.remove("hide");
}
});
}else{
images.forEach((image) => {
image.classList.remove("hide");
});
}
}
</script>
Here is the HTML part
<head>
<title> Counterpicks </title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1> Counterpicks pro debily </h1>
<div class="container">
<div class="searchbox_container">
<div class="searchbox">
<input type="text" name=" " placeholder="Search" class="search" id="searchInput" onkeyup="search()">
</div>
</div>
<div class="image_container">
<img data-tags="aatrox" src="aatrox.webp" alt="Aatrox" class="actionimages">
<img data-tags="ahri" src="ahri.webp" alt="Ahri" class="actionimages">
</div>
I input only few of the lines because they are just repeating for 130 lines.
And here is the CSS
.container {
background: rgba(0,0,0,0);
text-align: center;
margin-left: 20%;
margin-right: 20%;
}
.searchbox {
text-align: center;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 20px;
}
.image_container {
clear:both;
}
.hide {
display:none;
This is my first project with JavaScript so I will be happy for any constructive criticism.
Replace:
var images = document.querySelectorAll(".image_container > img");
with:
var images = document.querySelectorAll(".image_container > a > img");
I have an HTML form that will contain predefined values that the user will have to confirm by editing their contents, if needed.
I would like to perform a constant check so that the color background of every cell changes accordingly to its content.
For example, if the cell is empty, its background should be red. Later on I will add more check, for example if it contains the string "MISSING VALUE" it should be yellow and so on.
This is an example of my form and the code I'm trying to execute:
<!DOCTYPE html>
<html>
<style type="text/css">
table.first {
display: table;
table-layout: auto;
float: none margin-left: auto;
margin-right: auto;
}
.table_element {
display: table-cell;
}
</style>
<table class="first">
<div class="table_element">
<p style="text-align: center;">First Name:<br><input name="import_date_visit" id="subEmail" type="text" required size="25" onchange="checkFilled();" value="Claudio"></p>
</div>
<div class="table_element">
<p style="text-align: center;">Last name:<br><input name="import_date_visit" type="text" required size="25" onchange="checkFilled();" value="MISSING VALUE"></p>
</div>
</table>
<script type="text/javascript">
function checkFilled() {
var inputVal = document.getElementsByClassName("table_element");
for (var i = 0; i < inputVal.length; i++) {
document.writeln((i + 1) + ": " + inputVal[i].value);
}
for (var i = 0; i < inputVal.length; i++) {
if (inputVal[i].value == "") {
inputVal[i].style.backgroundColor = "red";
} else {
inputVal[i].style.backgroundColor = "white";
}
}
}
checkFilled();
</script>
</html>
What I don't understand is how to get the value of the string inside the div element. As you can see, I'm trying to print it as a debug, and I'm expecting to get the values Claudio and MISSING VALUE, but all I get is undefined. I suppose it should be pretty straightforward to get the content of a cell, so I assume I'm missing something very obvious.
Thanks for the help.
First find input element inside your div element and then use value property on it.
function checkFilled() {
const divEle = document.getElementsByClassName("table_element");
for(let i = 0; i < divEle.length; i++) {
const inputVal = divEle[i].children[0].children[1];
if (inputVal.value == "") {
inputVal.style.backgroundColor = "red";
} else if (inputVal.value == "MISSING VALUE") {
inputVal.style.backgroundColor = "green";
}
}
}
checkFilled();
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table.first{
display: table;
table-layout: auto;
float:none
margin-left: auto;
margin-right: auto;
}
.table_element{
display: table-cell;
}
</style>
</head>
<body>
<table class="first">
<div class="table_element">
<p style="text-align: center;">First Name:<br>
<input name="import_date_visit" id="subEmail" type="text" required size="25" onchange="checkFilled();" value="Claudio" />
</p>
</div>
<div class="table_element">
<p style="text-align: center;">Last name:<br><input name="import_date_visit" type="text" required size="25" onchange="checkFilled();" value="MISSING VALUE" /></p>
</div>
</table>
</body>
</html>
Firstly, you should always have a body element. Whenever you create anew HTML document, you should first paste in the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
Scripts and stylesheets should go into the head section, and any content that should be visible to the user in to the body section. <meta charset="utf-8"> should be always present - else non-ASCII characters will not be rendered correctly. Change utf-8 to whatever encoding you use in your editor.
Secondly, inputVal[i].value tries to access the value property of the p element in side .table_element - but paragraphs don't have a value, so you get undefined.
Thirdly, document.write and document.writeln should not be used - if you want to show something to the user, write it into a HTML element, and if you want to print something for debugging purposes, use console.log(...).
Lastly, div's are not valid children of a table - only thead, tbody and tr are.
To find the input elements, you can use document.querySelectorAll. Following the working, modern code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
table.first {
display: table;
table-layout: auto;
float: none;
margin-left: auto;
margin-right: auto;
}
.table_element {
display: table-cell;
}
</style>
<script type="text/javascript">
function checkFilled() {
let inputElements = document.querySelectorAll(".table_element input");
let outputElement = document.querySelector("#output");
outputElement.innerHTML = "You entered : ";
for (let [index, inputElement] of inputElements.entries()) {
outputElement.innerHTML += " " + (index + 1) + " " + inputElement.value;
if (inputElement.value == "") {
inputElement.style = "background-color: red;";
} else {
inputElement.style = "background-color: green;";
}
}
}
window.addEventListener("load", checkFilled);
</script>
</head>
<body>
<div class="table_element">
<p style="text-align: center;">First Name :</p>
<input name="import_date_visit" id="subEmail" type="text" required size="25" oninput="checkFilled();" value="Claudio">
</div>
<div class="table_element">
<p style="text-align: center;">Last name :</p>
<input name="import_date_visit" type="text" required size="25" oninput="checkFilled();" value="MISSING VALUE">
</div>
<p id="output">You entered : nothing yet</p>
</body>
</html>
I have the situation where I want to blur and unblur a background dynamically based on the inclusion of text in an input.
The unblur happens nicely, however, the re-blur on clearance of the input is not working? Not sure if I've just been staring at this too long, but hitting up SO because I'm slowly going insane looking at this. Thanks in advance for any help!
Code below:
<div>
<form name="search" class="searchBarClass" action="/action_page.php" style="margin:auto;max-width:300px">
<input type="text" placeholder="Search.." name="searchInput" onkeyup="unblur();blur();">
<button type="submit"><span class="material-icons">search</span></button>
</form>
</div>
<div id="background"></div>
Script for update:
function unblur() {
document.getElementById("background").style.filter = "none";
}
function blur() {
var x = document.forms["search"]["searchInput"].value;
if (x === "") {
document.getElementById("map").style.filter = "blur(2px)";
}
}
The intention is to blur the background whenever the input is empty. Here's some minimal code that accomplishes that:
const bgDiv = document.getElementById("background");
// blur background image when input is empty
function blurOnEmptyInput() {
var x = document.forms["search"]["searchInput"].value;
if (x === "") {
bgDiv.classList.add('blur');
} else {
bgDiv.classList.remove('blur');
}
}
/* style with CSS instead of embedding in JavaScript function */
.bg-image {
background-image: url("https://picsum.photos/300/100");
height: 100px;
width: 300px;
border: 1px solid gray;
}
.blur {
filter: blur(2px);
}
div {
margin: 1rem 0 0 1rem;
}
<div>
<form name="search">
<input placeholder="Search.." name="searchInput"
onkeyup="blurOnEmptyInput();">
</form>
</div>
<div id="background" class="bg-image blur"></div>
I am a beginner at JavaScript and I have been working on this very simple project for a couple of days. It is supposed to allow you to calculate the area and perimeter of a rectangle, but despite how much I tweaked the code, it will not calculate when I enter numbers. It should just be a simple user interface that allows you to input into two text boxes:
var $ = function (id) {
return document.getElementById(id);
}
var calculate_click = function () {
var width = parseFloat($("width").value);
var length = parseFloat($("length").value);
$("area").value = "";
$("perimeter").value = "";
if (isNaN(width) || width <= 0) {
alert("Width must be a valid number and greater than zero.");
}
else if (isNaN(length) || width <= 0) {
alert("Length must be a valid number and greater than zero.");
} else {
var area = width * length;
var perimeter = 2 * width + 2 * length;
$("area").value = area;
$("perimeter").value = perimeter;
}
window.onload = function () {
$("calculate").onclick = calculate_click;
$("length").focus();
}
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #333366; }
#content {
width: 450px;
margin: 10px auto;
padding: 5px 20px;
background: white;
border: thin solid black; }
#salesTax, #total {
color: black; }
#taxCalc label {
display: block;
width: 6em;
text-align: right;
padding-right: 1em;
float: left; }
#taxCalc input {
display: block;
float: left; }
#taxCalc br {
clear: left; }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Area and Perimeter Calculator</title>
<link rel="stylesheet" type="text/css" href="sales_tax.css" />
<script type="text/javascript" src="sales_tax.js"></script>
</head>
<body>
<div id="content">
<h2>Area and Perimeter Calculator</h2>
<p>Enter the values below and click "Calculate".</p>
<div id="taxCalc">
<label for="length">Length:</label>
<input type="text" id="length" /><br />
<label for="width">Width:</label>
<input type="text" id="width" /><br />
<label for="area">Area:</label>
<input type="text" id="area" disabled="disabled" /><br />
<label for="perimeter">Perimeter:</label>
<input type="text" id="total" disabled="disabled" /><br />
<label> </label>
<input type="button" id="calculate" value="Calculate" /><br />
</div>
</div>
</body>
</html>
If anyone can please help even a little, I would genuinely appreciate it,
Thank you.
There were two problems with your script (Well technically three, but I think the missing v at the beginning was a copy/paste mistake.
1st: The window.onload functions needs to be outside calculate_click. It never gets called, because the calculate_click never gets called.
2nd: The input for perimeter, had id="total", but you were calling $("perimeter"). This is fixed in the jsfiddle.
Here is a working form.
I will appreciate if somebody could help me to find how to solve out one problem, probably I need very simple thing but I don't know how to put it in one, so what I need - Section which include tick box, then button submit, but if you don't tick the check box and push the button appear window which says You must do....,
I've done it but I need this
but if you tick and push button should smoothly appear pop up window with just text information! I don't know how to get that,
This is thats section with checkbox and button
<form name="form" method="post" action="#" onSubmit="return checkme();">
<input type="checkbox" name="agree" value="agree_terms" class="terms">
I´ve read terms and conditions and I´m ready to shop
<input type="submit" name="submit" value="" class="submit">
</form>
and this is javascript
function checkme() {
missinginfo = "";
if (!document.form.agree.checked) {
missinginfo += "You must agree to the Terms and Conditions";
}
if (missinginfo != "") {
missinginfo ="" +
"\n" +
missinginfo + "" +
"\n Please tick the box and try again.";
alert(missinginfo);
return false;
}
else {
return true;
}
}
I tried in Different Way
<body>
<title>LIGHTBOX EXAMPLE</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">here</a></p>
<div id="light" class="white_content">This is the lightbox content. Close</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>
But when I tick check box on the background appear window with the content but I need pop up window appear only after when I tick the box and push the button
"f you tick and push button should smoothly appear pop up window with just text information" - you've almost did it. Just add alert to the second branch. Try this code:
<!DOCTYPE html>
<html>
<!-- [[[ head -->
<head>
<title>element</title>
<script type="text/javascript">
function checkme() {
if (!document.form.agree.checked) {
missinginfo = "You must agree to the Terms and Conditions\n Please tick the box and try again.";
alert(missinginfo);
return false;
}
else {
alert("Text information");
return true;
}
}
</script>
</head>
<!-- ]]] -->
<body>
<form name="form" method="post" action="#" onSubmit="return checkme();">
<input type="checkbox" name="agree" id="agree" value="agree_terms" class="terms">
<label for="agree"> I´ve read terms and conditions and I´m ready to shop</label>
<input type="submit" name="submit" value="Submit" class="submit">
</form>
</body>
</html>