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();
Related
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" />
Ok so my code is below. Once the calculate price button is clicked, I want it to display the results beneath the button. ie. number of cars = CarNumber, type of car = CarType and the price of the car = CarPrice. I know this is probably super easy to do but I just cant get it to work.
HTML:
<!DOCTYPE html>
<html>
<body>
<form name="Cars">
<h1>Car Sales</h1>
<p>Which type of car would you like (A, B or C)</p>
<input type="text" name="CarType"><br>
<p>how many cars would you like (1-100)</p>
<input type="text" name="CarNumber"><br>
<br>
<button onclick="return beginfunction()">Calculate Price</button>
<p id="message"></p>
<script src="car.js"> </script>
</form>
</body>
</font>
JavaScript:
function beginfunction() {
var CarType = document.forms["Cars"]["CarType"].value;
var CarNumber = document.forms["Cars"]["CarNumber"].value;
var CarPrice;
if ( !( CarType == 'A' || CarType == 'B' || CarType == 'C' ) ) {
CarTypeError = "Invalid Car Type";
document.getElementById("message").innerHTML = CarTypeError;
return false;
}
{
if (isNaN(CarNumber)) {
CarNumberError = "Invalid Quantity Entered";
document.getElementById('message').innerHTML = CarNumberError;
return false;
}
}
{
if (CarNumber >0 && CarNumber <10)
{
}
else
CarError = "Invalid";
document.getElementById('message').innerHTML = CarError;
return false;
}
{
if (CarType == 'A') {
CarPrice = 30;
} else if (CarType == 'B') {
CarPrice = 20;
} else if (CarType == 'C'){
CarPrice = 10;
}
}
}
The way that you use innerHTML is right, but there is some logic problems in your function, here is the refactored code:
function beginfunction() {
var CarType = document.forms["Cars"]["CarType"].value;
var CarNumber = document.forms["Cars"]["CarNumber"].value;
var CarPrice;
var message = "";
if ( !( CarType == 'A' || CarType == 'B' || CarType == 'C' ) ) {
message = "Invalid Car Type";
}else{
if (CarType == 'A') {
CarPrice = 30;
} else if (CarType == 'B') {
CarPrice = 20;
} else if (CarType == 'C'){
CarPrice = 10;
}
message = CarPrice;
}
if (isNaN(CarNumber)) {
message = "Invalid Quantity Entered";
}
if (CarNumber >0 && CarNumber <10)
{
}
else{
message = "Invalid";
}
document.getElementById('message').innerHTML = message;
return false;
}
I have drop-down and text-box in a gridview and I am trying to check if the selected value of a drop-down is set to "No" and no comments is entered in the text-box then i want to show message. The requirement should be as long as the selected value of the drop down is set to No then comments must be entered in the text-box. My issue is that i am getting the message even if the drop-down is set to Yes or comments is provided when the drop down is set to No. Here is the code:
function validate() {
var flag = false;
var gridView = document.getElementById('<%= GridView1.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var ddl = gridView.rows[i].getElementsByTagName('Select');
var areas = gridView.rows[i].getElementsByTagName('textarea');
if (ddl != null && ddl.length > 1 && ddl[0] != null && areas != null && areas.length > 1 && areas[0] != null) {
if (areas[0].type == "textarea" && ddl[0].type == "select-one") {
var txtval = areas[0].value;
var txtddl = ddl[0].value;
if (txtddl.value == "No" && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true
}
}
}
}
if (!flag) {
alert('Please note that comments is required if drop down is set to No. Thanks');
areas[i].focus();
}
return flag;
}
</script>
You can do like this:
<script>
function validate() {
var flag = false;
var gridView = document.getElementById('<%= GridView1.ClientID %>');
for (var i = 1; i < gridView.rows.length; i++) {
var selects = gridView.rows[i].getElementsByTagName('select');
//var inputs = gridView.rows[i].getElementsByTagName('input');
var areas = gridView.rows[i].getElementsByTagName('textarea');
if (selects != null && areas != null) {
if (areas[0].type == "textarea") {
var txtval = areas[0].value;
var selectval = selects[0].value;
if (selectval == "No" && (txtval == "" || txtval == null)) {
flag = false;
break;
}
else {
flag = true;
}
}
}
}
if (!flag) {
alert('Please enter comments. Thanks');
}
return flag;
}
</script>
Try this:
$('#select').on('change', function () {
var text = $(this).find(":selected").text();
var textBox = $(this).parent().filter('input [name="InputName"]');
if(text == "no" && textBox.val() =="")
{
\\display your message
}
});
I am looking to make a checkbox that when unchecked, will turn off a certain function in a .js file. Can someone help me?
popup.html
HTML Check box:
content.js
Turn off this function:
var tweet = new Array();
var tweetName = new Array();
function linkSnipe() {
for (var i = 0; i < 5; i++) {
tweetName[i] = document.getElementsByClassName("fullname js-action-profile-name show-popup-with-id")[0].innerHTML;
tweet[i] = document.getElementsByClassName("js-tweet-text")[i].innerHTML;
}
if (tweet[0].match(shoeName) == shoeName && tweet[0].match(filterer) != filterer && tweet[0].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[0].click();
update();
}
}
else if (tweet[1].match(shoeName) == shoeName && tweet[1].match(filterer) != filterer && tweet[1].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[1].click();
update();
}
}
else if (tweet[2].match(shoeName) == shoeName && tweet[2].match(filterer) != filterer && tweet[2].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[2].click();
update();
}
}
else if (tweet[3].match(shoeName) == shoeName && tweet[3].match(filterer) != filterer && tweet[3].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[3].click();
update();
}
}
else if (tweet[4].match(shoeName) == shoeName && tweet[4].match(filterer) != filterer && tweet[4].match(filter2) != filter2) {
if(checkon == "Tweets"){
document.getElementsByClassName("twitter-timeline-link")[4].click();
update();
}
}
else if(checkon == "Tweets") {
location.reload();
}
}
setTimeout("linkSnipe()", 250);
}
When the checkbox is checked, redefine the function as:
<input type=checkbox ..... onchange="doit()">
function doit() {
window.linkSnipe=function() {}
}
I've used this too:
function doit() {
window['linkSnipe']=function() {}
}
If you want to turn the function on and off by the checkbox:
<input type=checkbox ..... onchange="doit(this)">
var linkSnipeSave = linkSnipe;
function doit(ck) {
if (ck.checked)
window['linkSnipe']=linkSnipeSave
else {
linkSnipeSave = linkSnipe; //not sure if this line is needed...pls test
window['linkSnipe']=function() {}
}
}
You could simply have a Boolean variable that changes with the state of your check box. You could then put an if statement around the function call that will only trigger if the checkbox is checked.
http://jsfiddle.net/W5P8X/
//initialize some variables.
bike_checked = false;
car_checked = false;
//get elements by their ID from html
bike = document.getElementById("bike");
car = document.getElementById("car");
//add event listeners to the html elements we found above
bike.addEventListener("click", toggle_bike, false);
car.addEventListener("click", toggle_car, false);
//toggle bike_checked variable on click
function toggle_bike(){
if(bike_checked == true)
bike_checked = false;
else
bike_checked=true;
current_state();
}
//toggle car_checked variable on click
function toggle_car(){
if(car_checked == true)
car_checked = false;
else
car_checked=true;
current_state();
}
//output current state.
function current_state(){
if(car_checked == true)
alert('Car checked');
if(bike_checked == true)
alert('Bike checked');
}
I answered with only javascript and no jQuery, but you could probably make it a bit more concise with jQuery.
I hope this helps.
I am trying to turn this code into a correct for loop statement, so that I can save my repetitions. I have tried my best to get it done, but I just don't know how I can write it correctly:
function myProg() {
var luckyNumber = 3;
var luckyNumber2 = 5;
var luckyNumber3 = 8;
var firstInput = document.luckForm.numberBox.value;
var secondInput = document.luckForm.numberBox2.value;
var thirdInput = document.luckForm.numberBox3.value;
var temp = '';
if (firstInput == luckyNumber && secondInput == luckyNumber2 && thirdInput == luckyNumber3 || firstInput == luckyNumber && secondInput == luckyNumber3 && thirdInput == luckyNumber2 || firstInput == luckyNumber2 && secondInput == luckyNumber3 && thirdInput == luckyNumber || firstInput == luckyNumber2 && secondInput == luckyNumber && thirdInput == luckyNumber3 || firstInput == luckyNumber3 && secondInput == luckyNumber && thirdInput == luckyNumber2 || firstInput == luckyNumber3 && secondInput == luckyNumber2 && thirdInput == luckyNumber)
{
alert('Congratulations! You got all 3 numbers correct. You\'ve won £1000!');
}
}
try something like this:
Array.prototype.getDuplicates = function() {
var cache = {}, results = [], that = this;
that.forEach(function(item, index) {
if(!cache.hasOwnProperty(item) && that.lastIndexOf(item) > index) {
results.push(item);
}
cache[item] = true;
});
return results;
}
var answers = [luckyNumber, luckyNumber2, luckyNumber3];
var indexes = [answers.indexOf(firstInput), answers.indexOf(secondInput), answers.indexOf(thirdInput)];
if(indexes.indexOf(-1) === -1 && indexes.getDuplicates().length === 0) {
// alert("Whatever");
}
Here's an example without using array. Input check was added.
function myProg() {
var numbersToMatch = 3;
var luckyNumbers = {n1: 3, n2: 5, n3: 8};
var firstInput = parseInt(document.luckForm.numberBox.value);
var secondInput = parseInt(document.luckForm.numberBox2.value);
var thirdInput = parseInt(document.luckForm.numberBox3.value);
if (isNaN(firstInput) || isNaN(secondInput) || isNaN(thirdInput)) {
alert('All inputs must be numbers!');
return;
}
var inputs = {n1: firstInput, n2: secondInput, n3: thirdInput};
var matches = {n1: false, n2: false, n3: false};
for (var i in inputs) {
for (var j in luckyNumbers) {
if ((!matches[j]) && (luckyNumbers[j] == inputs[i])) {
matches[j] = true;
numbersToMatch--;
break;
}
}
}
if (numbersToMatch == 0) {
alert('Congratulations! You got all 3 numbers correct. You\'ve won £1000!');
}
}