I am using this function:
function sel_test(e) {
//alert(e.length-1);
var splitdata = e.split("d");
var newstr = e.substring(0,e.length-1);
dropcall = 1;
nodes = newstr.split(';');
o = 0;
if (nodes[0] == '1') o = nodes.shift();
for (i=0;i<nodes.length;i++) {
e = nodes[i];
var ul = document.getElementById(e);
if (icons) var img = document.getElementById(e+'i');
if (ul) {
if (((ul == 'none') AND (ul.style.display == 'none')) OR (ul.style.display == '')) {
ul.style.display = 'block';
} else if (!o) {
ul.style.display = 'none';
}
}
}
javascript is giving me an error of missing parenthesis:
if (((ul == 'none') AND (ul.style.display == 'none')) OR (ul.style.display == '')) {
what this the correct way of doing this.
You should be using && and || instead of AND and OR.
Shouldn't you?
Try this:
if (((ul == 'none') && (ul.style.display == 'none')) || (ul.style.display == ''))
JavaScript has an AND operator, but it isn't the word AND, it is && (also &, for a bitwise and). Similarly, rather than OR you want || (or | for bitwise).
Note that your ul variable will never be equal to the string 'none' - the return from document.getElementById(e) will always be either the matching DOM element, or null if no element has the supplied id.
Further reading: Logical Operators (and you should read it, because && and || don't always return true or false and MDN explains this).
You are also missing the closing right squiggly for the function.
Related
I am working on a typing game and I am trying to imitate the same effect of highlighting of the characters to be typed like in https://www.ratatype.com/typing-test/test/. However, it was harder than what I imagined.
I created code which uses replace function to give style on the character. However, it only replaces the first instance of the character and the other instances, it won't do what it was supposed to do.
const originTextDiv = document.getElementById('origin-text'); //the div that was supposed to be highlighted.
function spellCheck() {
let textEntered = textArea.value;
//let textCharEntered = textEntered.split("");
let originTextMatch = originText.substring(0, textEntered.length);
// console.log(textEntered);
var key = event.keyCode || event.charCode;
originChar = originText.split("");
//console.log(originTextDiv);
char = originTextDiv.textContent;
//console.log(char);
console.log(originChar[index]);
//console.log(textCharEntered);
if (textEntered == originText) {
textWrapper.style.borderColor = 'orange';
$("#myModal").modal();
stop();
} else {
if (textEntered == originTextMatch) {
textWrapper.style.borderColor = 'green';
textArea.style.backgroundColor = 'white';
// if (!(key == 20 || key == 16 || key == 18 || key == 8 || key == 46 || key ==17 )){
originTextDiv.innerHTML = char.replace(originChar[index], '<span style="background-color:green;">' +originChar[index]+ '</span>'); //here is the code where it is highlighting
++index;
// }
// if (key == 8 || key == 46){
// --index;
// }
} else {
textWrapper.style.borderColor = 'red';
textArea.style.backgroundColor='f23a49';
originTextDiv.innerHTML = char.replace(originChar[index], '<span style="background-color:red;">' +originChar[index]+ '</span>');
if (!(key == 8 || key == 46)){
error++;
}
}
}
}
I expected to have it work as intended but I didn't knew replace only replaces the first instance. I tried to look at on replaceAt functions for javascript but when I tried it the replaceAt also replaces the span tag attached. Could someone give me some pointers on how to recreate the same effect as the reference above?
It will make selection words starting with "p" and ending with "a". Why it didnt work?
function checkWord(word) {
if (word.charAt(0) = 'p' && word.charAt(word.length - 1) = 'a') {
return true;
} else {
return false;
}
= is used for assigning values, not checking them. Use == for checking the values and === for checking value and types. So, your code should be like:
function checkWord(word) {
if (word.charAt(0) === 'p' && word.charAt(word.length - 1) === 'a') {
return true;
} else {
return false;
}
This should do the trick.
You didn't put 2 equals to if you only put 1 equals you are assigning it and if you put 2 equals you're comparing it the. below code should help
/* Check weather the first letter is equals to p and the last letter is equals to a. */
function checkWord(word) {
let firstPAndLastA = false;
if(word != null){
if (word.charAt(0) == 'p' && word.charAt(word.length - 1) == 'a') {
firstPAndLastA = true;
} else {
firstPAndLastA = false;
}
}
return firstPAndLastA;
}
//Calling Function
console.log(checkWord("ppoa"))
I cannot seem to get this function to check multiple image sources on click and run a sound to work, is there something I am doing wrong?
function victory() {
if (document.getElementById("Image0").src == "0.jpg" &&
document.getElementById("Image1").src == "1.jpg" &&
document.getElementById("Image2").src == "2.jpg" &&
document.getElementById("Image3").src == "3.jpg" &&
document.getElementById("Image4").src == "4.jpg" &&
document.getElementById("Image5").src == "5.jpg" &&
document.getElementById("Image6").src == "6.jpg" &&
document.getElementById("Image7").src == "7.jpg" &&
document.getElementById("Image8").src == "8.jpg" &&
document.getElementById("Image9").src == "9.jpg")
{
document.getElementById("vic").currentTime = 0;
document.getElementById("vic").play();
}
It's working for me:
http://jsfiddle.net/29y5346m/1/
function victory() {
if (document.getElementById("Image0").src.indexOf("0.jpg") != -1)
{
document.getElementById("vic").currentTime = 0;
document.getElementById("vic").play();
}
}
Things you may have wrong:
"}" on the end is missing (for function victory())
image.src can have a route prefix for a given image, use indexOf instead. That way you search in the string for that name
I am updating an existing JavaScript application. Part of this update involves formatting things better and cleaning up code.
Right now this is one of the Functions which uses if() and else statements without all the correct brackets in place... I personbally hate it when people do this shorthand method and even more so when they mix it and use it sometimes and not others. THat is the case in this example code below.
this.setFlags = function() {
if (document.documentElement)
this.dataCode = 3;
else
if (document.body && typeof document.body.scrollTop != 'undefined')
this.dataCode = 2;
else
if (this.e && this.e.pageX != 'undefined')
this.dataCode = 1;
this.initialised = true;
}
I honestly do not know how to correctly add the brackets to this function, below is what I have but I am thinking it might not be correct. Can a JavaScript expert let me know?
this.setFlags = function() {
if (document.documentElement){
this.dataCode = 3;
}else{
if (document.body && typeof document.body.scrollTop != 'undefined'){
this.dataCode = 2;
}else{
if (this.e && this.e.pageX != 'undefined'){
this.dataCode = 1;
}
}
}
this.initialised = true;
}
I share your dislike of unbracketed if/else statements. Your bracketing seems correct to me. However, there's a simpler way that's equivalent:
this.setFlags = function() {
if (document.documentElement) {
this.dataCode = 3;
} else if (document.body && typeof document.body.scrollTop != 'undefined') {
this.dataCode = 2;
} else if (this.e && this.e.pageX != 'undefined') {
this.dataCode = 1;
}
this.initialised = true;
}
As Dave Chen points out in a comment, because of the simplicity and parallelism of the if/else branches—they all assign a value to this.dataCode—you could also use nested ternary operators:
this.setFlags = function() {
this.dataCode = document.documentElement ? 3
: document.body
&& typeof document.body.scrollTop != 'undefined' ? 2
: this.e && this.e.pageX != 'undefined' ? 1
: this.dataCode;
this.initialised = true;
}
The advantage of this is that it is clearer that all the conditions are simply determining which value to assign to this.dataCode. The disadvantage (a big one, in my opinion) is that unless the nested ternary operators are formatted in a careful way (such as what I did here), it's basically impossible to get any sense of what's going on without carefully studying the expression. Unfortunately, most JavaScript code formatters that I'm familiar with do a very poor job of formatting such expressions (or preserving such formatting). (Interestingly, several Perl formatters that I've used do a wonderful job of this. But this isn't Perl.)
It's correct but you can make it neater:
this.setFlags = function() {
if (document.documentElement) {
this.dataCode = 3;
} else if (document.body && typeof document.body.scrollTop != 'undefined') {
this.dataCode = 2;
} else if (this.e && this.e.pageX != 'undefined') {
this.dataCode = 1;
}
this.initialized = true;
};
oh this is already posted
I have to fix some form validation but there's no jQuery included in the host page. I'd normally do something like this...
if ($("#contactNameAdd").val() !== '' || $("#contactPhoneAdd").val() !== '') {
$("#contactForm").show()
};
How can I re-write that in normal js?
var name = document.getElementById("contactNameAdd");
var phone = document.getElementById("contactPhoneAdd");
var form = document.getElementById("contactForm");
if(name.value != '' || phone.value != '') {
form.style.display = "block";
}
if (document.getElementById('contactNameAdd').value !== '' || document.getElementById('contactPhoneAdd').value !== '') {
document.getElementById('contactForm').style.display = 'block';
}
In plain javascript, you use document.getElementById('id') to get DOM nodes based on the id attribute. You use .value on a DOM Input element to get its value. And you use .style on any DOM element to set css attributes. In this case "show" means "display: block;".
if (document.getElemenById('contactNameAdd').value != '' || document.getElementById('contactPhoneAdd').value != '') {
document.getElementById('contactForm').style.display = 'block';
}
Try this - checks the 2 values then changes the style.display property of the 'contactForm'
This should do the trick.
var contactNameAdd = document.getElementById("contactNameAdd");
var contactPhoneAdd = document.getElementById("contactPhoneAdd");
if((contactNameAdd !== null && contactNameAdd.value !== '') || (contactPhoneAdd !== null && contactPhoneAdd.value !== ''))
{
document.getElementById("contactForm").style.display = 'block';
}
var contactName = document.getElementById('contactNameAdd');
var contactPhone = document.getElementById('contactPhoneAdd');
if(contactName.value !== '' || contactPhone.value !== '') {
// Different as JQuery, there will be no animation.
// I assume you use 'display:none' to hide the form.
var form = document.getElementById('contactForm');
form.style.display = 'block';
}