in my innerhtml, i have pass and fail and i want to add css properties for these.
function display()
{
var a=document.getElementById("myList");
var dropdownvalue = a.options [a.selectedIndex].text;
var b=document.getElementById("myText").value;
if(dropdownvalue == b.substring(0,4)) {
document.getElementById("result").innerHTML = "Pass";
} else {
document.getElementById("result").innerHTML = "Fail";
}
}
you can use .style
if(dropdownvalue == b.substring(0,4)) {
document.getElementById("result").innerHTML = "Pass";
document.getElementById("result").style.color = "green";
}
else {
document.getElementById("result").innerHTML= "Fail";
document.getElementById("result").style.color = "red";
}
Comment for any questions :)
Related
Hope someone can help. I'm new to JS and need some help.
I have the following code:
}
function onBall3Click() {
var ball3 = document.querySelector('.ball3');
alert('Ball3');
if (ball3.innerText == 'OFF') {
ball3.style.backgroundColor = 'yellow';
ball3.innerText = 'ON';
} else if (ball3.innerText == 'ON') {
ball3.style.backgroundColor = 'gray';
ball3.innerText = 'OFF';
}
}
function onBall4Click() {
var ball4 = document.querySelector('.ball4');
alert('Ball4');
var size = prompt("What should be the size of the ball?");
if (size > 1000) {
alert('Too Big!')
} else {
ball4.style.width = size;
ball4.style.height = size;
}
what I need to know is how to disable function onBall4click when the Ball3.innerText = 'OFF'
and how to enable the function once the Ball3.innerText = 'ON'
Appreciate all the support.
I am not an expert in Javascript but I think all you need to do is add a guard clause in the onBall4click function and check if Ball3 is ON before doing anything. The modified function would look something like this:
function onBall4Click() {
var ball3 = document.querySelector(".ball3");
if(ball3.innerText === "OFF") return;
var ball4 = document.querySelector('.ball4');
alert('Ball4');
var size = prompt("What should be the size of the ball?");
if (size > 1000) {
alert('Too Big!')
} else {
ball4.style.width = size;
ball4.style.height = size;
}
}
When you click on Ball 4, the function checks Ball3 and stops executing if it is off.
I'm trying to make a tag checker for a game where you can find allies and enemies but when I add else at the end is shows everyone as the enemy. I have the enemy list but it's too big to write them all...
How can I get this work properly?
if (document.getElementById("tagcheck").value == "WCT") {
//document.getElementById("tagcheck").style.backgroundColor = "green";
document.getElementById("checker").value = "FRIEND";
document.getElementById("checker").style.backgroundColor = "green";
}
if (document.getElementById("tagcheck").value == "WeUSA") {
//document.getElementById("tagcheck").style.backgroundColor = "green";
document.getElementById("checker").value = "FRIEND";
document.getElementById("checker").style.backgroundColor = "green";
}
if (document.getElementById("tagcheck").value == "x114x") {
//document.getElementById("tagcheck").style.backgroundColor = "green";
document.getElementById("checker").value = "FRIEND";
document.getElementById("checker").style.backgroundColor = "green";
}
if (document.getElementById("tagcheck").value == "YPJ") {
//document.getElementById("tagcheck").style.backgroundColor = "green";
document.getElementById("checker").value = "FRIEND";
document.getElementById("checker").style.backgroundColor = "green";
}
// Enemy tags
else if (document.getElementById("tagcheck").value.length == 0 ) {
document.getElementById("checker").value = "ERROR";
document.getElementById("checker").style.backgroundColor = "yellow";
}
else {
document.getElementById("checker").value = "ENEMY";
document.getElementById("checker").style.backgroundColor = "red";
}
return false;
};
Your else if come from nowhere...
I suppose you are looking for that ?
const tagCheck = document.getElementById('tagcheck')
, eChecker = document.getElementById('checker')
, friendsTags = [ 'WCT', 'WeUSA', 'x114x', 'YPJ' ]
;
function XYZ ()
{
if (friendsTags.includes( tagCheck.value ))
{
//tagCheck.style.backgroundColor = 'green';
eChecker.value = 'FRIEND';
eChecker.style.backgroundColor = 'green';
}
else if (tagCheck.value.length == 0 )
{
eChecker.value = "ERROR";
eChecker.style.backgroundColor = "yellow";
}
else
{
eChecker.value = "ENEMY";
eChecker.style.backgroundColor = "red";
}
return false;
}
I have a problem with my code and I would appreciate if you help me. The problem is - when you fill in all inputs in the form correctly, the script removes attribute "disabled" from the submit button but for example if you clear all fields after filling in the forms, submit button will be able to submit the form, but it have to back attribute "disable". how can I fix it?
//validation name
document.callbackform.name.onkeyup = function() {
var name = document.callbackform.name.value;
if (name === "") {
document.callbackform.name.removeAttribute("class", "ready");
document.getElementById("callError").style.display = "block";
document.getElementById("calllErrorTwo").style.display = "none";
} else {
document.getElementById("callError").style.display = "none";
var pattern = new RegExp("^[а-я]+$", "i");
var isValid = this.value.search(pattern) >= 0;
if (!(isValid)) {
document.getElementById("calllErrorTwo").style.display = "block";
document.callbackform.name.removeAttribute("class", "ready");
} else {
document.getElementById("calllErrorTwo").style.display = "none";
document.callbackform.name.setAttribute("class", "ready");
}
}
};
//validation phone
document.callbackform.phone.onkeyup = function() {
var name = document.callbackform.phone.value;
if (name === "") {
document.callbackform.phone.removeAttribute("class", "ready");
document.getElementById("calltelError").style.display = "block";
document.getElementById("calltelErrorTwo").style.display = "none";
} else {
document.getElementById("calltelError").style.display = "none";
var pattern = new RegExp("[- +()0-9]+");
var isValid = this.value.search(pattern) >= 0;
if (!(isValid)) {
document.getElementById("calltelErrorTwo").style.display = "block";
} else {
document.getElementById("calltelErrorTwo").style.display = "none";
document.callbackform.phone.setAttribute("class", "ready");
}
}
};
//filling the form
document.callbackform.onkeyup = function() {
var a = document.callbackform.name.getAttribute("class");
var c = document.callbackform.phone.getAttribute("class");
if (a === "ready" && c === "ready") {
document.getElementById("subCallback").removeAttribute("disabled");
document.getElementById("subCallback").style.cursor = "pointer";
} else {
document.getElementById("subCallback").setAttribute("disabled");
document.getElementById("subCallback").style.cursor = "not-allowed";
}
};
Simple fix. .setAttribute("disabled"); doesn't work as disabled is a property, not an attribute, as it does not have a value. You simply need to use .disabled = true; as shown:
document.getElementById("subCallback").disabled = true;
It will also be good to use the following to remove the disabled property:
document.getElementById("subCallback").disabled = false;
.
Remember, setAttribute() always requires two arguments, the second argument being the attribute value.
JavaScript rookie here, trying to understand why the first validation in the following code is not working. I am getting that Date.style is undefined but this is just a copy from the code I am using on the other fields and is working fine in all of them except for validationDate(ymd).
function validateDate(ymd) {
var ymd = document.getElementById('Date').value;
var legalEntry = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
if (ymd.length == 0) {
Date.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The date can\'t be empty";
return false;
} else if (!legalEntry.test(ymd)) {
Date.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The date must be in format YYYY-MM-DD";
return false;
} else {
Date.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
<tr><td>Date (YYYY-MM-DD)*</td>
<td><input type="text" onblur="validateDate()" name="Date" id="Date" size="10" maxlength="10"/></td>
Thanks
As requested here is the full code which is working for the other fields:
function validateForm() {
return (validateRunnerId
&& validateEventId
&& validateDate
&& validateTime
&& validatePosition
&& validateCategoryId
&& validateAge
&& validatePB);
}
function validateRunnerId(ID) {
var ID = document.getElementById('RunnerId').value;
var legalEntry = /^\d{1,5}?$/;
if (ID.length == 0) {
RunnerId.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The RunnerId can\'t be empty";
return false;
}
else if (!legalEntry.test(ID)) {
RunnerId.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The RunnerId must be a number from 1 to 99999";
return false;
}
else {
RunnerId.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validateEventId(ID) {
var ID = document.getElementById('EventId').value;
var legalEntry = /^\d{1,5}?$/;
if (ID.length == 0) {
EventId.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The EventId can\'t be empty";
return false;
}
else if (!legalEntry.test(ID)) {
EventId.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The EventId must be a number from 1 to 99999";
return false;
}
else {
EventId.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validateDate(date) {
var date = document.getElementById('Date').value;
var legalEntry = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
if (date.length == 0) {
Date.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The date can\'t be empty";
return false;
}
else if (!legalEntry.test(date)) {
Date.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The date must be in format YYYY-MM-DD";
return false;
}
else {
Date.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validateTime(time) {
var time = document.getElementById('Time').value;
var legalEntry = /^(?:(?:([01]?\d|2[0-3]):)?([0-5]?\d):)?([0-5]?\d)$;/
if (time.length == 0) {
Time.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The finish time can\'t be empty";
return false;
}
else if (!legalEntry.test(time)) {
Time.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The finish time must be in format HH:MM:SS";
return false;
}
else {
Time.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validatePosition(position) {
var position = document.getElementById('Position').value;
var legalEntry = /^\d{1,5}?$/
if (position.length == 0) {
Position.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The position can\'t be empty";
return false;
}
else if (!legalEntry.test(position)) {
Position.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The position must be a number from 1 to 99999";
return false;
}
else {
Position.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validateCategoryId(ID) {
var ID = document.getElementById('CategoryId').value;
var legalEntry = /^\d\d?[0]?$/;
if (ID.length == 0) {
CategoryId.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The CategoryId can\'t be empty";
return false;
}
else if (!legalEntry.test(ID)) {
CategoryId.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The CategoryId must be a number from 1 to 100";
return false;
}
else {
RunnerId.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validateAge(age) {
var age = document.getElementById('Age').value;
var legalEntry = /^\d\d?\,?\d?\d?$/;
if (age.length == 0) {
Age.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The age grade can\'t be empty";
return false;
}
else if (!legalEntry.test(age)) {
Age.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The age grade must be decimal number of maximum 2 integers and 2 decimals";
return false;
}
else {
Age.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
function validatePB(pb) {
var pb = document.getElementById('PB').value;
var legalEntry = /^(0|1)$/;
if (pb.length == 0) {
pb.value = "0";
}
else if (!legalEntry.test(pb)) {
PB.style.background = 'Orange';
error.style.color = 'red';
document.getElementById('error').innerHTML = "The PB can only be 0 for false and 1 for true";
return false;
}
else {
PB.style.background = 'White';
document.getElementById('error').innerHTML = "";
return true;
}
}
Your code is depending on an old non-standard mechanism in browsers where element IDs get mapped to variables. For example:
<div id="foo"></div>
<script>
foo.innerHTML = 'Hi!';
</script>
The problem you're facing is that the internal logic looks kind of like this:
<div id="foo">
<script INTERNAL>
if (window.foo == undefined) {
window.foo = document.getElementById('foo');
}
</script>
</div>
<script>
foo.innerHTML = 'Hi!';
</script>
The variable is only getting assigned when it doesn't already exist. Your Date variable is never getting written because window.Date is an existing function.
You can see this in action at this fiddle: http://jsfiddle.net/8fjkc/2/ If I have the elements, one named Date, one with the same name as a user-defined variable, and one with an unused name, only the one with an unused name gets mapped to a variable.
The simplest solution is to rename your "Date" element to something else like "DateField", but you've seen that this is very brittle. Your best solution is to define a variable using document.getElementById. You could even define it as Date inside a function scope without breaking anything external:
function validateDate(date) {
var Date = document.getElementById('Date');
...
}
var foobar = new Date(); // <-- still works.
I have an assignment where I have to select an animation and run it. It works except the turbo function doesnt work like its suppose to and I'm not sure how to change the font size here is the link http://turing.plymouth.edu/~besopko/hw6/ascii.html
My php is:
var frameStr;
var frameSeq;
var currentFrame;
var frameanime;
var q;
var startspeed = 250;
function startFunction(){
frameStr = document.getElementById("Frame").value;
if(frameStr.indexOf("\r\n")!=-1){
frameSeq = frameStr.split("=====\r\n");
}
else{
frameSeq = frameStr.split("=====\n");
currentFrame = 0;
q = setInterval(NextFrame, startspeed);
}
}
function AnimeFunction(){
frameanime = document.getElementById("animation").value;
if(frameanime == "EXERCISE"){
$("Frame").value = EXERCISE;
}
else if(frameanime == "JUGGLER"){
$("Frame").value = JUGGLER;
}
else if(frameanime == "BIKE"){
$("Frame").value = BIKE;
}
else if(frameanime == "DIVE"){
$("Frame").value = DIVE;
}
else if(frameanime == "CUSTOM"){
$("Frame").value = CUSTOM;
}
}
function NextFrame(){
document.getElementById("Frame").value = frameSeq[currentFrame];
currentFrame = (currentFrame+1)% frameSeq.length;
}
function stopFunction(){
clearInterval(q);
}
//this function isn't working properly
function turboFunction(){
var speed = document.getElementById("speed1");
if(speed.checked){
startspeed = 50;
q = setInterval(nextFrame, startspeed);
}
else {
startspeed = 250;
q = setInterval(nextFrame, startspeed);
}
}
function sizeFunction(){
text = document.getElementById("size").value;
if(text == "tiny"){
$("Frame").value = //stuck here;
}
}
I'm not sure why the turboFunction() is working incorrectly and I'm not exactly sure how to change the font size of the ascii animation. Any input would be very helpful.