I'm trying to change the width of a box using user-input with a for loop and if-else statement. Cant seem to get the first if statement to execute. Here is the javascript:
function changeWidth(){
var widthSize = document.getElementById("num").value;
for(var s = 0; s < widthSize; s++){
if(s < 0 || s > 800){
alert("Not a valid width size"); }
else {
document.getElementById("box-1").style.width="s";
}
}
}
The CSS:
.box {
border: 1px solid black;
width: 200px;
height: 200px;
float:left;
margin-left:30px;
}
The HTML:
<input type="number" id="num" name="num" value="" placeholder="Please enter width size" />
<input type="button" id="btt3" name="btt3" value="Generate size" onclick="changeWidth();" />
<div class="box" id="box-1"></div>
You don't need a loop, this should do it.
function changeWidth(){
var widthSize=document.getElementById("num").value;
if(widthSize < 0 || widthSize > 800){
alert("Not a valid width size"); }
else {
document.getElementById("box-1").style.width=widthSize+"px";
}
}
If your trying to change the width several times, So you just need to remove the quotes for your variable s.
Like this:
document.getElementById("box-1").style.width=s;
But in case your trying to just set the value of widthSize, and just once, it maybe be like this:
document.getElementById("box-1").style.width=widthSize;
return;
This should work...
function changeWidth() {
var widthSize = parseInt(document.getElementById("num").value);
if (widthSize < 0 || widthSize > 800) {
alert("Not a valid width size");
} else {
document.getElementById("box-1").style.width = widthSize + 'px';
}
}
.box {
border: 1px solid black;
width: 200px;
height: 200px;
float: left;
margin-left: 30px;
transition: width 1s ease;
}
<input type="number" id="num" name="num" value="" placeholder="Please enter width size" /> <input type="button" id="btt3" name="btt3" value="Generate size" onclick="changeWidth();" />
<div class="box" id="box-1">
<div class="box-1-words" id="b1-words"> Hello World </div>
</div>
s will never be less than 0 as thats the min value for your for loop and if the number u input is less than 800 then the IF condition will never execute. Are you entering a number more than 800 and still the alert is not showing up?
function changeWidth(){
var widthSize=document.getElementById("num").value;
for(var s=0;s<widthSize;s++){
if(widthSize<0 || widthSize>800){
alert("Not a valid width size");
break;
}
else{
var a ="transition:2s ease-in;width:"+widthSize+"px;"
document.getElementById("box-1").style.cssText=a;
}
}
}
.box{border:1px solid black; width:200px; height:200px; float:left; margin-left:30px;}
<input type="number" id="num" name="num" value="" placeholder="Please enter width size" />
<input type="button" id="btt3" name="btt3" value="Generate size" onclick="changeWidth();" />
<div class="box" id="box-1"></div> </body>
Related
I want to change width of a textfield when user enters more than 17 characters in that textfield using Javascript (if possible) otherwise by any other means.
I wrote a code to do the same, but it only changes width when user click outside the textfield after entering more than 17 characters. I want it to change width automatically when user enters more than 17 characters :
function widen() {
var value = nametf.value;
if (value.length > 17) {
nametf.style.width = '300px';
} else {
nametf.style.width = '200px';
}
}
#nametf {
width: 200px;
height: 20px;
padding: 5px 10px;
}
<title>TEXTFIELD TEST</title>
<form method="get" action="wwhome.php">
<input type="text" name="name1" id="nametf" onchange="widen()" value="" required>
</form>
onchange gets activated when the input looses focus, that's why it works when you click outside. On the other hand oninput will be triggered immediately when the value changes:
const nametf = document.getElementById('nametf');
function widen() {
var value = nametf.value;
if (value.length > 17) {
nametf.style.width = '300px';
} else {
nametf.style.width = '200px';
}
}
#nametf {
width: 200px;
height: 20px;
padding: 5px 10px;
}
<html>
<form method="get" action="wwhome.php">
<input type="text" name="name1" id="nametf" oninput="widen()" value="" required>
</form>
</html>
You need to pass a self-reference to the function using this. I would also change on-change to on-key-up, because on-change waits for you to move focus away from the field.
onkeyup="widen(this)"
Then you need to parameterize the function with your variable "nametf"
function widen(nametf) {
// ...
}
Example
function widen(nametf) {
var value = nametf.value;
if (value.length > 17) {
nametf.style.width = '300px';
} else {
nametf.style.width = '200px';
}
}
#nametf {
width: 200px;
height: 20px;
padding: 5px 10px;
}
<title>TEXTFIELD TEST</title>
<form method="get" action="wwhome.php">
<input type="text" name="name1" id="nametf" onkeyup="widen(this)" value="" required>
</form>
A better approach would be to use em units to expand the text are based on the current value.
initExpandingFields();
function initExpandingFields() {
Array.from(document.querySelectorAll('.expanding-field')).forEach(field => {
field.addEventListener('keyup', onFieldChange);
});
}
function onFieldChange(e) {
let field = e.target,
len = field.value.length;
field.style.width = (len * 0.667) + 'em';
}
#nametf {
width: 200px;
height: 20px;
padding: 5px 10px;
}
<title>TEXTFIELD TEST</title>
<form method="get" action="wwhome.php">
<input type="text" class="expanding-field" name="name1" id="nametf" value="" required>
</form>
Try this:
var nametf = document.getElementById("nametf");
nametf.addEventListener("input", function(){
if(nametf.value.length > 17) {
nametf.size = "30";
} else {
nametf.size = "20";
}
});
#nametf {
height: 20px;
padding: 5px 10px;
}
<title>TEXTFIELD TEST</title>
<form method="get" action="wwhome.php">
<input type="text" name="name1" id="nametf" size="20" value="" required>
</form>
So I'm playing with my knowledge around javascript and making form, so i made password input into html and gave maxlength 17 and when someone writes 17 letters i want div to comeout but its not working
function myFunction(){
var letters = document.getElementsByClassName("inp4");
var l = letters[0].value.length;
var wdw = document.getElementById("pas");
if (l >= 17) {
wdw.style.display = "block";
}
}
<input type="password" class="inp4" maxlength="17" placeholder=" Password" >
<!-- javascript when maxlength 17 -->
<div id="pas">
<p>maximum amount of letters is 17</p>
</div>
<input type="password" class="inp5" maxlength="17" placeholder=" Repeat your password">
#pas {
width:200px;
height:40px;
background-color:#8DC3D8;
z-index: 1;
position: absolute;
border-radius:5%;
font-size:0.9rem;
padding:5px;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
color:white;
left:-4.5%;
bottom:51%;
display:none;
}
You need to attacht your function to input event listener, such as onkeypress
So on every keypress you check the number of characters in your input field
See the code snippet below
function myFunction(val) {
var wdw = document.getElementById("pas");
if (val.length >= 17) {
wdw.style.display = "block";
}
}
#pas {
width:200px;
height:60px;
background-color:#8DC3D8;
z-index: 1;
position: absolute;
border-radius:5%;
font-size:0.9rem;
padding:5px;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
color:white;
top: 100px;
display:none;
<!DOCTYPE html>
<html>
<head>
<title>Password</title>
</head>
<body>
<input type="password" class="inp4" maxlength="17" placeholder=" Password" onkeypress="myFunction(this.value)" > <!-- javascript when maxlength 17 -->
<div id="pas">
<p>maximum amount of letters is 17</p>
</div>
<input type="password" class="inp5" maxlength="17" placeholder=" Repeat your password">
</body>
</html>
If you want the <div id="pas"> to show up when the password equals 17 characters you can do this in your JS if you use jQuery...
$('.inp4').keydown(function() {
let length = $('.inp4').value.length;
if(length === 17) $('#pas').hide();
else $('#pas').show();
});
I am trying to create a custom error message when a number which is too high or low is entered in the "size" element. However, I am unable to make this work. I am a beginner so a solution which involves the least changes to my existing code would be most appreciated.
function autoFillcost() {
var size = document.getElementById("size").value;
if (size <= 25)
document.getElementById("cost").value = "£100";
else if (size >= 26 && size <= 50)
document.getElementById("cost").value = "£200";
else
document.getElementById("cost").value = "£300";
}
function sizeValidate() {
var size = document.getElementById("size");
if (!size.checkValidity()) {
size.setCustomValidity("ERROR!");
} else {
size.setCustomValidity("");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<form>
Group Size:<input type="number" min="6" max="200" id="size" onblur="autoFillcost();sizeValidate();" required>
<p>Cost:<input type="text" id="cost"></p>
<p id="demo"></p>
</form>
</body>
</html>
Sorry for digging, but it is possible, just report it after you set it.
Hopefully this helps others.
if (!size.checkValidity()) {
size.setCustomValidity("ERROR!");
size.reportValidity();
}
The problem with setCustomValidity is, that it does only work once you submit the form.
function autoFillcost() {
var size = document.getElementById("size").value;
if (size <= 25)
document.getElementById("cost").value = "£100";
else if (size >= 26 && size <= 50)
document.getElementById("cost").value = "£200";
else
document.getElementById("cost").value = "£300";
}
function sizeValidate() {
var size = document.getElementById("size");
if (!size.checkValidity()) {
size.setCustomValidity("ERROR!");
} else {
size.setCustomValidity("");
}
}
button {
padding:6px;
cursor:pointer;
}
input {
padding:5px;
border:1px solid #aaa;
box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
border-radius:2px;
}
input:valid {
background-color: white;
}
input:invalid {
background-color: lightpink;
}
<form>
Group Size:<input type="number" min="6" max="200" id="size" onblur="autoFillcost();sizeValidate();" required />
<p>Cost:<input type="text" id="cost"></p>
<p id="demo"></p>
<button type="submit">Submit</button>
</form>
I am using javascript to create an image slideshow, but no images are shown.
What am I doing wrong?
window.onLoad(
window.setInterval(function() {
var source = ["niepic1.jpg", "niepic.png"];
var count = 0;
document.getElementById("cover_main").style.backgroundImage = url(source[count]);
if (count >= 2) {
count = 0;
} else {
count++;
}
}, 5000);
);
#cover_main {
background-image: url("");
height: 45%;
background-size: 100% 100%;
width:100%;
height:480px;
}
#cover_main_inside {
background-color:#A8A8A8 ;
opacity: 0.76;
margin-left: 75%;
margin-top: 2%;
}
<div class="row" id="cover_main">
<div class="col-3" style=" color:black; background-color:; border-radius:15px;" id="cover_main_inside">
<form class="form" action="pages/main/aboutteam.html" method="POST">
<h2 style="margin-left:40px;">Log In:</h2>
E-mail Address:<br>
<input id="name" type="email" name="email" placeholder="name#nie.ac.in" required><br><br>
Password:<br>
<input type="password" name="password" placeholder="********" required><br><br>
<input class="input-button" type="submit" name="submit" value="Let Me In">
</form><br>
Forgot Password?
</div>
</div>
There are a couple of problems with your code as written - first, I don't think you're calling window.onload correctly. Also, move the count variable out of the setInterval call, or else it will always be 0 when you set the backgroundImage. You also don't need to re-set the source array, so that can come out of the setInterval. Finally, with only 2 elements in your source array, you can reset count if it's greater than 1, since JavaScript arrays are 0-indexed.
var count = 0;
var source = ["niepic1.jpg","niepic.png"];
window.onload = function () {
window.setInterval(function() {
document.getElementById("cover_main").style.backgroundImage = "url('" + source[count] + "')";
if (count >= 1)
{
count = 0;
}
else
{
count++;
}
}, 5000);
}
In your code when write
document.getElementById("cover_main").style.backgroundImage = url(source[count]);
Here you are referring to the url variable or more of url function which is not present and breaking your code, so use
document.getElementById("cover_main").style.backgroundImage = 'url("'+source[count]+'")';
var count = 0;
var source = ["niepic1.jpg", "niepic.png"];
setInterval(function() {
document.getElementById("cover_main").style.backgroundImage = 'url("'+source[count]+'")';
document.getElementById("cover_main").innerHTML = "current background-image style is "+document.getElementById("cover_main").style.backgroundImage;
count = (count >= 1)? 0 : ++count;
}, 1000);
#cover_main {
background-image: url("");
height: 45%;
background-size: 100% 100%;
width:100%;
height:480px;
}
#cover_main_inside {
background-color:#A8A8A8 ;
opacity: 0.76;
margin-left: 75%;
margin-top: 2%;
}
<div class="row" id="cover_main">
<div class="col-3" style=" color:black; background-color:; border-radius:15px;" id="cover_main_inside">
<form class="form" action="pages/main/aboutteam.html" method="POST">
<h2 style="margin-left:40px;">Log In:</h2>
E-mail Address:<br>
<input id="name" type="email" name="email" placeholder="name#nie.ac.in" required><br><br>
Password:<br>
<input type="password" name="password" placeholder="********" required><br><br>
<input class="input-button" type="submit" name="submit" value="Let Me In">
</form><br>
Forgot Password?
</div>
</div>
I created a maze that gets the height and width values from user. I gave a background color to maze object, but I want the background width to be the same size as the width of the maze. If the maze's width is getting bigger the background gets bigger as well. How can I do that? this is my html code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.mze
{
color: Blue;
text-align: center;
background-color: Yellow;
width: 100%;
}
.prompt
{
background-color: Yellow;
color: Red;
}
</style>
<script src="mazegenerator.js"></script>
<title>Maze</title>
</head>
<body>
<div id="maze">
<form style="text-align: center" name="forma1">
<br/>
<label>
HEIGHT: </label>
<input type="text" id="height" name="height" autofocus="autofocus"
maxlength="2" size="6" value="" />
<label>
WIDTH: </label>
<input type="text" id="width" name="width" maxlength="2" size="6" value="" />
<br/>
<br/>
<span id="prompt"></span>
<br/>
<input type="button" alt="submit" onclick="CreateMaze();"
value="Generate" style="margin-top: 10px;">
</form>
</div>
<div id="Mzobj" align="center">
<pre id="out" class="mze"></pre>
</div>
</body>
</html>
this is the js part where I get the value from user:
function CreateMaze(){
//gets the value of Height & Width from user
var a = parseInt(document.getElementById("height").value);
var b = parseInt(document.getElementById("width").value);
//Values of Height and Width can't be zero
if (a == 0) {
document.getElementById('prompt').innerHTML = "<b>height</b> is invalid";
document.getElementById('prompt').className = "prompt";
return;
}
if (b == 0) {
document.getElementById('prompt').innerHTML = "<b>width</b> is invalid";
document.getElementById('prompt').className = "prompt";
return;
}
//Width can't be smaller than height
if (a > b) {
document.getElementById('prompt').innerHTML = "not possible";
document.getElementById('prompt').className = "prompt";
}
else {
document.getElementById('prompt').innerHTML = "";
document.getElementById('prompt').className = "";
}
document.getElementById('out').innerHTML = display(maze(a,b));
}
//Display the maze
function display(m) {
var text= [];
for (var j= 0; j<m.x*2+1; j++) {
var line= [];
if (0 == j%2)
for (var k=0; k<m.y*4+1; k++)
if (0 == k%4)
line[k]= '+';
else
if (j>0 && m.verti[j/2-1][Math.floor(k/4)])
line[k]= ' ';
else
line[k]= '-';
else
for (var k=0; k<m.y*4+1; k++)
if (0 == k%4)
if (k>0 && m.horiz[(j-1)/2][k/4-1])
line[k]= ' ';
else
line[k]= '|';
else
line[k]= ' ';
if (0 == j) line[1]=line[3]=' ',line[2]= 'S';
if (m.x*2-1 == j) line[4*m.y]= 'E';
text.push(line.join('')+'\r\n');
}
return text.join('');
this is the image of what I get:
As long as the width entered by the user is in pixels you can add the following code at the end of your 'CreateMaze()` function...
document.getElementById("Mzobj").setAttribute("style", "width:" + b + "px");
If not then you will need to figure out how to convert the entered width to a measurement that will work in an HTML page. If it is the number of characters across then you need to figure out how many units that a character in the font takes up and calculate it. var width = <number units per character> * <number of characters> The link below should help with units.
http://desource.uvu.edu/dgm/2740/IN/steinja/lessons/05/l05_03.html?m=1