We Keep Coding

Script does not jump to the next field when the maxlength is reached

This is my script
<script>
var InputContainer = document.getElementsByClassName("InputContainer")[0];
container.onkeyup = function(e) {
var target = e.srcElement || e.target;
var maxLength = parseInt(target.attributes["maxlength"].value, 10);
var myLength = target.value.length;
if (myLength >= maxLength) {
var next = target;
while (next = next.nextElementSibling) {
if (next == null)
break;
if (next.tagName.toLowerCase() === "input") {
next.focus();
break;
}
}
}
// Move to previous field if empty (user pressed backspace)
else if (myLength === 0) {
var previous = target;
while (previous = previous.previousElementSibling) {
if (previous == null)
break;
if (previous.tagName.toLowerCase() === "input") {
previous.focus();
break;
}
}
}
}
</script>
I have also put a around the entire form.
You can find the original webpage at: https://im-here.biz/ContactForm/contact-inc.php
Obviously, I am doing something wrong here.
Ideas?

I can see an error in the console on the above-mentioned URL. By seeing your code there is no container defined. I guess you should be using InputContainer instead of the container variable or change the declaration like this:
<script defer>
// Put your code here
var container = document.getElementsByClassName("InputContainer")[0];
</script>

how to change background image according to weather

how to change background image according to weather. I used the code which someone mentioned in this site but it didn't worked please guide me. I did some changes but it didn't work please helppp. Here is my JavaScript code
function backgroundChange(weather) {
if (sky-cond == Rain) {
document.body.style.backgroundImage = "url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cac950bd-8f59-4376-8597-52366358d12e/d9wvf1t-b8eec3f5-b88b-4b1f-8aac-36bc21e06a92.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvY2FjOTUwYmQtOGY1OS00Mzc2LTg1OTctNTIzNjYzNThkMTJlXC9kOXd2ZjF0LWI4ZWVjM2Y1LWI4OGItNGIxZi04YWFjLTM2YmMyMWUwNmE5Mi5qcGcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.WYDWFRtXw1BslrbVksftWlGdI6xCc0wHMhKMMx-NEuM')";
} else if (weatherinfo == Clouds) {
document.body.style.backgroundImage = "url(cloud.gif)";
} else if (sky-cond == Clear) {
document.body.style.backgroundImage = "url('https://image.freepik.com/free-photo/panorama-sky-sunrise-sunset-beautiful-view-dark-blue-clouds-lit-by-bright-orange-yellow-sun-clear-sky-beauty-power-nature-meteorology-climate-changing-concept_127089-8097.jpg')";
}else if (sky-cond == Haze) {
document.body.style.backgroundImage = "url(https://www.pixelstalk.net/wp-content/uploads/2016/06/Dark-Woods-HD-Wallpaper.jpg)";
} else {
document.body.style.backgroundImage= "url(background.gif)";
}
}

something like that should work:
function backgroundChange(weather) {
if (weather === 'Rain') {
document.body.style.backgroundImage = "url('https://sukhbinder.files.wordpress.com/2012/10/wpid-rain.jpg')";
} else if (weather === 'Clouds') {
document.body.style.backgroundImage = "url(cloud.gif)";
} else if (weather === 'Clear') {
document.body.style.backgroundImage = "url('https://i...')";
}else if (weather === 'Haze') {
document.body.style.backgroundImage = "url('https://live.staticflickr.com/7192/6814624698_2a45c14996_n.jpg')";
} else {
document.body.style.backgroundImage= "url(background.gif)";
}
}
<button onclick="backgroundChange('Rain')">rain</button>
<button onclick="backgroundChange('Haze')">haze</button>
the paramter weather should contain your skyCond variable as a String. as #PizzaDownload said the dash in your name is invalid.
Be aware that with the strict comparison === the upper and lower case plays a role.

Try this,
backgroundChange("Clear"); // Can change the parameter to check different climates
public backgroundChange(weather) {
if (weather == "Rain") {
document.body.style.backgroundImage =
"url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cac950bd-8f59-4376-8597-52366358d12e/d9wvf1t-b8eec3f5-b88b-4b1f-8aac-36bc21e06a92.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvY2FjOTUwYmQtOGY1OS00Mzc2LTg1OTctNTIzNjYzNThkMTJlXC9kOXd2ZjF0LWI4ZWVjM2Y1LWI4OGItNGIxZi04YWFjLTM2YmMyMWUwNmE5Mi5qcGcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.WYDWFRtXw1BslrbVksftWlGdI6xCc0wHMhKMMx-NEuM')";
} else if (weather == "Clouds") {
document.body.style.backgroundImage = "url(cloud.gif)"; // give proper url for the image or gif here
} else if (weather == "Clear") {
document.body.style.backgroundImage =
"url('https://image.freepik.com/free-photo/panorama-sky-sunrise-sunset-beautiful-view-dark-blue-clouds-lit-by-bright-orange-yellow-sun-clear-sky-beauty-power-nature-meteorology-climate-changing-concept_127089-8097.jpg')";
} else if (weather == "Haze") {
document.body.style.backgroundImage =
"url(https://www.pixelstalk.net/wp-content/uploads/2016/06/Dark-Woods-HD-Wallpaper.jpg)";
} else {
document.body.style.backgroundImage = "url(background.gif)"; // give proper url for the image or gif here
}
}

How do i randomize a quiz in javascript while recording right and wrong answers?

I'm trying to get the quiz to loop 5 times while recording the correct answer for each question before returning to start menu but I'm struggling to get it working
Any help with this will be much appreciated.
function cleartxt()
{
setTimeout("document.getElementById('ans').innerHTML = ''", 3000);
}
var random = new Array(5);
var count = 0;
function next()
{
var store = 0;
do
{
store = (Math.round(Math.ceil(Math.random() * 40) -1));
}while(random.indexOf(store) > -1);
document.getElementById("ques").innerHTML = questions[store][0];
document.getElementById("rad1").innerHTML = questions[store][1];
document.getElementById("rad2").innerHTML = questions[store][2];
document.getElementById("rad3").innerHTML = questions[store][3];
document.getElementById("rad4").innerHTML = questions[store][4];
document.getElementById("image").src = images[store];
var radio = document.getElementsByName("rad");
while(store <= 5)
{
count++;
if(store == 5)
startMenu();
if(radio[0].checked == true)
{
if(questions[store][0] == questions[store][5])
document.getElementById("ans").innerHTML = "Correct";
else
document.getElementById("ans").innerHTML = "Incorrect";
}
else if(radio[1].checked == true)
{
if(questions[store][1] == questions[store][5])
document.getElementById("ans").innerHTML = "Correct";
else
document.getElementById("ans").innerHTML = "Incorrect";
}
else if(radio[2].checked == true)
{
if(questions[store][2] == questions[store][5])
document.getElementById("ans").innerHTML = "Correct";
else
document.getElementById("ans").innerHTML = "Incorrect";
}
else if(radio[3].checked == true)
{
if(questions[store][3] == questions[store][5])
document.getElementById("ans").innerHTML = "Correct";
else
document.getElementById("ans").innerHTML = "Incorrect";
}
else
document.getElementById("ans").innerHTML = "Please select an answer!";
}
}
function startMenu()
{
window.history.back();
}

var won't redefine itself

I am making a 2-player web game using HTML, CSS, jQuery and JS. The way my game works is that it's tic-tac-toe except when the table is full, you can replace a tile that was previously controlled by your opponent with a tile of your own. The problem is that I can't get the code to recognize that the table is full. He is a small example of my code:
<tr>
<td class="left" ID="one1">
<div class="playerclick" ID="red11"></div>
<div class="playerclick" ID="blue11"></div>
</td>
<td ID="one2">
<div class="playerclick" ID="red12"></div>
<div class="playerclick" ID="blue12"></div>
</td>
<td ID="one3">
<div class="playerclick" ID="red13"></div>
<div class="playerclick" ID="blue13"></div>
</td>
And here is the JS:
var turn = 'red';
var fullTable = 'no';
var redLines = 0;
var blueLines = 0;
var tile1 = 'noclick';
var tile1preClick = 'no';
var tile1justClick = 'no';
var tile2 = 'noclick';
var tile2preClick = 'no';
var tile2justClick = 'no';
var tile3 = 'noclick';
var tile3preClick = 'no';
var tile3justClick = 'no';
var folderIf = 'folder';
$(document).ready(function() {
$('#one1').click(function() {
$('#one1').click(function() {
if (fullTable === 'no')
{
if (tile1 === 'noclick')
{
if (turn === 'red' && tile1preClick === 'no')
{
tile1 = 'red';
$('#red11').css('opacity', '1');
$('#one1').css('background', 'white');
$('#one1').addClass('preclick');
tile1preClick = 'yes';
turn = 'blue';
}
if (turn === 'blue' && tile1preClick === 'no')
{
tile1 = 'blue';
$('#blue11').css('opacity', '1');
$('#one1').css('background', 'white');
$('#one1').addClass('preclick');
turn = 'red';
}
}
$('.preclick').click(function(){
if (fullTable === 'no')
{
if (tile1preClick === 'yes' && tile2preClick === 'yes' && tile3preClick === 'yes')
{
$('.preclick').removeClass('preclick');
fullTable = 'yes';
}
else {
confirm('You can\'t claim this tile yet!');
}
}
});
}
if (fullTable === 'yes')
{
if (tile1 === 'blue' && tile1justClick === 'no')
{
if (turn === 'red')
{
tile1 = 'red';
$('#blue11').css('opacity', '0');
$('#blue11').css('background', 'initial');
$('#blue11').hide();
$('#red11').show();
$('#red11').css('background', '#FF0000');
$('#red11').css('opacity', '1');
$('#one1').css('background', 'white');
if (folderIf === 'folder')
{
$('#one1').removeClass('justclick');
$('#one2').removeClass('justclick');
$('#one3').removeClass('justclick');
}
$('#one1').addClass('justclick');
if (folderIf === 'folder')
{
tile1justClick = 'yes';
tile2justClick = 'no';
tile3justClick = 'no';
}
turn = 'blue';
}
}
if (tile1 === 'red' && tile1justClick === 'no')
{
if (turn === 'blue')
{
tile1 = 'blue';
$('#red11').css('opacity', '0');
$('#red11').css('background', 'initial');
$('#red11').hide();
$('#blue11').show();
$('#blue11').css('background', 'blue');
$('#blue11').css('opacity', '1');
$('#one1').css('background', 'white');
if (folderIf === 'folder')
{
$('#one1').removeClass('justclick');
$('#one2').removeClass('justclick');
$('#one3').removeClass('justclick');
}
$('#one1').addClass('justclick');
if (folderIf === 'folder')
{
tile1justClick = 'yes';
tile2justClick = 'no';
tile3justClick = 'no';
}
turn = 'red';
}
}
$('.justclick').click(function() {
confirm('You can\'t claim that tile yet!');
});
}
});
})
I have no idea why this isn't working. Any help?
EDIT:
Wow, I didn't think that I'd get answers that quickly. To be more clear, the var fullTable is supposed to indicate to the game if the table is full. At the beginning, it is set to 'no' (I might change it to use booleans), and when all the tiles have been clicked, it will be set to 'yes', however, I can't get the program to recognize that the table is full. If the table isn't full, any tile that has already been clicked cannot be changed, but once the table is full it can be.
Jaromanda X, thanks for telling me that it adds a .preclick or a .justclick every time the user clicks the tile. I will fix that now.
EDIT(2): Oh my gosh, I feel dumb. I was fixing the class adding and realized that blue doesn't change the variable tile1preClick to 'yes'. I'm pretty sure that I've solved this one on my own... Thanks for your answers.

what is wrong with .this. javascript if else code?

it works if i use the first half only but i need to widen the parameters
//document.querySelectorAll('font[color="black"]');
var fonts = document.querySelectorAll('font[color="black"]');
var searchString = 'Mir';
var searchString2 = 'MirrorCreator';
for (var i = 0; i < fonts.length; i++) {
var font = fonts[i];
if (fonts[i].innerHTML.indexOf(searchString) !== - 1) {
//alert('Match');
var eventLink = 'ComeHere';
var elA = document.createElement('a');
elA.setAttribute('id', eventLink);
elA.setAttribute('name', eventLink);
font.appendChild(elA);
window.location.hash = 'ComeHere';
break;
}
else (fonts[i].innerHTML.indexOf(searchString2) !== - 1) {
//alert('Match');
var eventLink2 = 'ComeHere2';
var elA2 = document.createElement('a');
elA2.setAttribute('id', eventLink2);
elA2.setAttribute('name', eventLink2);
font.appendChild(elA2);
window.location.hash = 'ComeHere2';
break;
}
}

Here you have wrong syntax:
else (fonts[i].innerHTML.indexOf(searchString2) !== - 1) {
It should be simple
else {
or
else if (fonts[i].innerHTML.indexOf(searchString2) !== - 1) {

You need to change your if else statement.
if(// conditional)
{
// do something.
}
else if(// conditional){
// do something....
}

Your else needs to be else if, because else isn't expecting (fonts[i].innerHTML.indexOf(searchString2) !== - 1)