We Keep Coding

Set minimum required length of a text input field using javascript?

I want to be able to perform validation based on how many characters were entered by the user - I want there to be a minimum of 7 characters. (The maximum value is set using an HTML attribute) - I have tried the following:
v3 = document.getElementById("npo-registration-number");
flag3 = true;
if (val >= 3 || val == 0) {
if (v3.value == "") {
v3.style.borderColor = "red";
flag3 = false;
}
else if (v3.value.length === 7){
v3.style.borderColor = "green";
flag3 = true;
}
}
The above works to an extent. The input fields border colour will only show green if 7 characters are inputted. However, if i delete characters from that point onwards, the border remains green. Any help on the matter is appreciated.

I'm not entirely sure about what you want; is this close to what you are looking for?
You probably did this and didn't include it in your snippet, but we need this to run each time the form is edited. We add an event listener to the input.
const input = document.getElementById('npo-registration-number');
input.addEventListener('input', () => {
// set the border to red if the value is < 7 characters
if (input.value.length < 7) {
input.style.borderColor = 'red';
return;
}
// otherwise, set it to green
input.style.borderColor = 'green';
});
This fixes an issue: you do not set the color of the border to red unless the value of the form is an empty string. Rather, we want the border to be red whenever the input length goes below seven.

It's because of your condition
if (v3.value == "") {
v3.style.borderColor = "red";
flag3 = false;
}
When you start deleting characters in input, your input is not becoming red again because It's red only when there are no characters and it change to green after 7 characters inputed.

You need to capture the input event so js can evaluate and update.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
const ev3 = document.getElementById("npo-registration-number");
let flag3 = true;
ev3.addEventListener('input', (e) => {
const val = e.target.value;
if (val.length === 7){
ev3.style.borderColor = "green";
flag3 = true;
}
else {
ev3.style.borderColor = "red";
flag3 = true;
}
});
input {
outline: 0;
border: 1px solid;
}
<input id="npo-registration-number" type='text'>

You can just use button that will run this function for it, like send or post buttons(many sites use this method).
function click(){
v3 = document.getElementById("npo-registration-number");
flag3 = true;
if (val >= 3 || val == 0) {
if (v3.value == "") {
v3.style.borderColor = "red";
flag3 = false;
}
else if (v3.value.length === 7){
v3.style.borderColor = "green";
flag3 = true;
}
}
}

Try this please
v3 = document.getElementById("npo-registration-number");
flag3 = true;
if (v3.value == "") {
v3.style.borderColor = "red";
flag3 = false;
} else {
if (v3.value.length < 7){
v3.style.borderColor = "red";
flag3 = false;
}
else {
v3.style.borderColor = "green";
flag3 = true;
}
}

Validate blank spaces in Javascript

I have some blank spaces in a paragraph that requires the correct word to be entered when written into it. I have a function checking if the words are correct and another that will change the font of the incorrect word entered to be red.
Does anyone know where I went wrong in this code? The isCorrect() function works when I am not calling the font() function, but I don't know what would be wrong with the font() function.
Thanks
function isCorrect(){
var word1 = document.getElementById("word1").innerHTML;
var word2 = document.getElementById("word2").innerHTML;
var word3 = document.getElementById("word3").innerHTML;
var word4 = document.getElementById("word4").innerHTML;
var word5 = document.getElementById("word5").innerHTML;
var word6 = document.getElementById("word6").innerHTML;
var word7 = document.getElementById("word7").innerHTML;
font(word1, word2, word3, word4, word5, word6, word7);
if (word1 == "digg" && word2 == "face" && word3 == "book" && word4 == "tumbled" && word5 == "linked" && word6 == "interest" && word7 == "follow")
{
alert("Correct");
}
else
{
alert("Not Correct");
}
}
//if wrong word is entered, it should turn red
function font(word1, word2, word3, word4, word5, word6, word7)
{
if (word1 != "digg")
{
word1.style.color = "red";
}
else
{
word1.style.color = "white";
}
if (word2 != "face")
{
word2.style.color = "red";
}
else
{
word2.style.color = "white";
}
if (word3 != "book")
{
word3.style.color = "red";
}
else
{
word3.style.color = "white";
}
if (word4 != "tumbled")
{
word4.style.color = "red";
}
else
{
word4.style.color = "white";
}
if (word5 != "linked")
{
word5.style.color = "red";
}
else
{
word5.style.color = "white";
}
if (word6 != "interest")
{
word6.style.color = "red";
}
else
{
word6.style.color = "white";
}
if (word7 != "follow")
{
word7.style.color = "red";
}
else
{
word7.style.color = "white";
}
}

The problem is you are passing wrong object in the font function.
Remove the innerHtml from the assignment.
var word1 = document.getElementById("word1").innerHTML;
instead pass this object inside the font function
var word1 = document.getElementById("word1");
Because document.getElementById("word1").style is an object not document.getElementById("word1").innerhtml.style
But here you need innerhtml object
if (word1 == "digg" && word2 == "face" && word3 == "book" && word4 == "tumbled" && word5 == "linked" && word6 == "interest" && word7 == "follow")
{
alert("Correct");
}
else
{
alert("Not Correct");
}

In your font function you are sending innerHMTL value, so you cant change style for that innerHMTL.
Instead send document.getElementById("word1")
function isCorrect(){
var word1 = document.getElementById("word1");
var word2 = document.getElementById("word2");
var word3 = document.getElementById("word3");
var word4 = document.getElementById("word4");
var word5 = document.getElementById("word5");
var word6 = document.getElementById("word6");
var word7 = document.getElementById("word7");
font(word1, word2, word3, word4, word5, word6, word7);
if (word1.innerHTML == "digg" && word2.innerHTML == "face" && word3.innerHTML == "book" && word4.innerHTML == "tumbled" && word5.innerHTML == "linked" && word6.innerHTML == "interest" && word7.innerHTML == "follow")
{
alert("Correct");
}
else
{
alert("Not Correct");
}
}
//if wrong word is entered, it should turn red
function font(word1, word2, word3, word4, word5, word6, word7)
{
if (word1.innerHTML != "digg")
{
word1.style.color = "red";
}
else
{
word1.style.color = "white";
}
if (word2.innerHTML != "face")
{
word2.style.color = "red";
}
else
{
word2.style.color = "white";
}
if (word3.innerHTML != "book")
{
word3.style.color = "red";
}
else
{
word3.style.color = "white";
}
if (word4.innerHTML != "tumbled")
{
word4.style.color = "red";
}
else
{
word4.style.color = "white";
}
if (word5.innerHTML != "linked")
{
word5.style.color = "red";
}
else
{
word5.style.color = "white";
}
if (word6.innerHTML != "interest")
{
word6.style.color = "red";
}
else
{
word6.style.color = "white";
}
if (word7.innerHTML != "follow")
{
word7.style.color = "red";
}
else
{
word7.style.color = "white";
}
}
I sent complete DOM elements into font function.
Then inside that I compared the word1.innerHTML

Javascript - Change certain character color in input

var input = document.getElementById("wordTyped");
var word = document.getElementById("wordGenerated").innerHTML;
window.onload = function() {
window.onkeydown = submit;
function submit(evt) {
if (evt.key == "Enter" && input.value == word) {
input.value = "";
input.style.color = "black";
} else if (evt.key == "Enter" && input.value != word) {
for (i = 0; i < word.length; i++) {
// Below is what I'm querying about
if (input.value[i] != word[i]) {
input.style.color = "red";
}
}
}
}
}
<div id="wordGenerated">illustration</div>
<input id="wordTyped" type="text" />
I don't think what I'm asking is even possible but I want to try changing the color of the input character that does not match with the word
For example,
wordGenerated: illustration
wordTyped: iilustration
The second 'i' in wordTyped should then change its color to red on Enter
I tried doing input.value.style.color[i] = "red" and input.value[i].style.color = "red", but these in return give a TypeError color of undefined.
The code above changed the whole input text color into red.

You just have to wrap your letters in a span element.
NB: the code below is just a prof of concept, I didn't optimize it.
I left optimization part to you.
good luck.
var input = document.getElementById("wordTyped");
var word = document.getElementById("wordGenerated").innerHTML;
window.onload = function() {
window.onkeydown = submit;
function submit(evt) {
var newWord=document.getElementById("wordGenerated");
newWord.innerHTML="";
if (evt.key == "Enter" && input.value == word) {
input.value = "";
input.style.color = "black";
} else if (evt.key == "Enter" && input.value != word) {
for (i = 0; i < input.value.length; i++) {
// Below is what I'm querying about
if (input.value[i] != word[i]) {
var child = document.createElement( "span" );
child.className='colored';
child.innerHTML = input.value[i];
newWord.appendChild( child );
}
else {
var child = document.createElement( "span" );
child.innerHTML = input.value[i];
newWord.appendChild( child );
}
}
}
}
}
.colored {
color: red;
}
<div id="wordGenerated">illustration</div>
<input id="wordTyped" type="text" />

Pass multiple input values to a function to update an image

I want to change an image depending on what two input values have been entered. How would this be done dynamically with two separate inputs? Here's my code so far.
function twoinputs() {
var size1 = document.getElementById("size1").value;
var size2 = document.getElementById("size2").value;
var getValue = size1.value;
var getValue2 = size2.value;
if (getValue == "1" && getValue2 == "1") {
document.getElementById('optimus').style.backgroundImage = "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
} else if (getValue == "2" && getValue2 == "2") {
document.getElementById('optimus').style.backgroundImage = "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
}
}
twoselects();
p {
width: 100%;
height: 200px;
}
<img class="prime" src="images/image_small.jpg">
<form>
Select image size:
<input id='size1' name='size1' onchange="twoinputs()">
<input id='size2' name='size2' onchange="twoinputs()">
</form>
<p id="optimus"></p>

First of all, inputs are self closing, so change the HTML to
<img class="prime" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
<form>
Select image size:
<input id='size1' name='size1'>
<input id='size2' name='size2'>
</form>
<p id="optimus"></p>
In the script, the problem is that you're getting the value twice, and you've mixed up the names of the function and some variables.
You could also use proper event handlers
var elem1 = document.getElementById("size1");
var elem2 = document.getElementById("size2");
var image = document.getElementById('optimus');
function twoinputs() {
var size1 = +elem1.value;
var size2 = +elem2.value;
if (size1 === 1 && size2 === 1) {
image.style.backgroundImage = "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
} else if (size1 == 2 && size2 == 2) {
image.style.backgroundImage = "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
}
}
twoinputs();
elem1.addEventListener('change', twoinputs, false);
elem2.addEventListener('change', twoinputs, false);
FIDDLE

Looks ok, but you have .value twice so size1.value will not have the attribute value, in other words:
function twoinputs() {
var size1 = document.getElementById("size1");
var size2 = document.getElementById("size2");
var getValue = size1.value;
var getValue2 = size2.value;**
if (getValue == "1" && getValue2 == "1") {
document.getElementById('optimus').style.backgroundImage = "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
} else if (getValue == "2" && getValue2 == "2") {
document.getElementById('optimus').style.backgroundImage = "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
}
}
twoselects();

Javascript change icon

I try to change the icon with select element. I have made it with 2 values, but now I need 3.
Any idea what is wrong with this code?
var icon = document.getElementById.("marker-icon");
if (type == 1) {
marker-icon.src = "images/icon1.png";
} else if (type == 2) {
marker-icon.src = "images/icon2.png";
} else if (type == 3) {
marker-icon.src = "images/icon3.png";
}
This code is for 2 values and it works fine.
var icon = (type == 1) ? "images/icon1.png" : "images/icon2.png";

Try this:
var icon = document.getElementById("marker-icon");
if (type == 1) {
icon.src = "images/icon1.png";
} else if (type == 2) {
icon.src = "images/icon2.png";
} else if (type == 3) {
icon.src = "images/icon3.png";
}
There was an extra . after the getElementById and you were using marker-icon instead of icon. (I am assuming that marker-icon is the id of an img tag.)

Try to use switch case syntax.
switch (type) {
case 1:
var icon = "images/icon1.png";
break;
case 2:
var icon = "images/icon2.png";
break;
case 3:
var icon = "images/icon3.png";
break;
default:
//default code block
break;
}

It works with that :
var icon = document.getElementById("icon");
if (type == 1) {
icon = "images/icon1.png";
} else if (type == 2) {
icon = "images/icon2.png";
} else if (type == 3) {
icon = "images/icon3.png";
}
Thanks for all! ^^