I am trying to create a series of buttons for a web page that would function like toggle buttons (active/inactive) and would change the source of an iframe based on which combination of buttons are currently selected. So, for example, if I want someone to visualize a product that comes in:
three colors (Red, Green, Blue)
three material types (Metal, Plastic, Glass)
three sizes (Small, Medium, Large)
and I happened to have a separate webpage for each option that I want to show based on the current selections (27 possible combinations in this case), how would I go about doing that? Sorry, I am not very experienced with this, but I am trying to learn.
//Would I set the initial variables like this?
var Red = true;
var Blue = false;
var Green = false;
var Metal = true;
var Plastic = false;
var Glass = false;
var Small = true;
var Medium = false;
var Large = false;
...
//Then set the initial state of each button? (Sorry, not sure what this would look like.)
btnRed.active;
btnMetal.active;
btnSmall.active;
...
//Then make a conditional statement to make sure two variables and two button states cannot be true at the same time within each of the three categories? (Again, sorry not sure what some of this code would look like.)
if (btnRed.active){
Red = true;
Blue = false;
Green = false;
btnBlue.active = false;
btnGreen.active = false;
} else if (btnBlue.active){
Red = false;
Blue = true;
Green = false;
btnRed.active = false;
btnGreen.active = false;
} else if (btnGreen.active){
Red = false;
Blue = false;
Green = true;
btnBlue.active = false;
btnRed.active = false;
}
...
//Then set the iframe source based on the variable combination?
if (Red = true && Metal = true && Small = true){
document.getElementById('myIframe').src = "http://somesite.com";
}
...
Any help is appreciated. Thank you!
I am assuming you are using radio buttons.
$('input[type="radio"]').on("change", setIframe);
var setIframe = function() {
var url;
//computation of url
$('iframe').attr("src", url);
}
Here is the complete working code : Working Code
Related
Working on a JavaScript program, and the first thing that happens when run is asking the user whether they want to enter something using prompt()s, or using a textarea. The textarea option comes with a clickable button element to press once the user has entered everything they want into the textarea.
If this option is chosen, I want the rest of my program to not run until this button is clicked, and the user is confirming that they are finished with their input. Currently I have the button code within the selection part (where the user has chosen to use a textarea), as below:
if (trimmedResponse == 'manual') {
... (irrelevant code)
} else { //if paste is chosen
var createArray = function(howMany){
var pasteInput = document.createElement("TEXTAREA");
var makingArray = [];
document.body.appendChild(pasteInput);
pasteInput.rows = howMany;
let done = document.createElement("button");
done.innerHTML = 'Enter terms';
done.onclick = function(){
for (var j = 0; j < howMany; j++){
makingArray[j] = String((pasteInput.value).replace(/ /g,'').split('-')).split('\n');
}
pasteInput.style.display = 'none';
done.style.display = 'none';
}
document.body.appendChild(done);
return makingArray;
}
termArray = window.createArray(numOfTerms); //getting a variable holding the array from the prior function, to access later
}
The rest of the script.js file is made up of the regular subroutines - preload, setup, draw, and some initialisation and other small methods in the open scope before preload(), as below in a greatly reduced format:
let BG;
let translateEdit = document.createElement("button");
translateEdit.innerHTML = "Edit a translation";
translateEdit.style.position = 'absolute';
translateEdit.style.left = '50px';
translateEdit.style.top = '130px';
let list = "";
translateEdit.onclick = function () {
this.blur();
do {
replaceChoice = prompt("Which translation do you want to edit? (1-"+numOfTerms+") \n"+list+" \nOr enter any letter to leave this screen.");
} while (replaceChoice < 1 || replaceChoice > termArray.length)
termArray[replaceChoice-1][1] = prompt("What is the new translation for the term "+termArray[replaceChoice-1][0]+"?");
list = "";
for (let i = 0; i < numOfTerms ; i++){
list += ((i+1)+". ["+termArray[i][0] + "] - [" + termArray[i][1] + "]\n") //adds each term and translation in a user-friendly / clear display to the list variable for later display
}
alert("The term list currently looks as follows: \n"+list);
};
document.body.appendChild(translateEdit);
let temp1;
let temp2;
let temp3;
var performanceDisplay = "";
function preload() { //function loading image from file into variable
Helvetica = loadFont('Helvetica-Bold.ttf');
BG = loadImage('images/background.png');
}
function setup() { //function to create display/background using image file and dimensions and instantiate objects (character,terms,counters) as well as slider and icon to be displayed for it
alert("Below are the terms you have entered: \n" + list + "If any of the above are incorrect, use the edit buttons on the next screen to adjust terms or translations.");
speakericon = loadImage('images/speaker.png');
createCanvas(width, height);
... (further code in setup())
}
function draw() { //make background + objects visible on screen, allow them to act as they must, creating new terms when necessary, calling functions in class files such as player movement (calls all functions in classes throughout function) - all run every tick
image(BG, 0, 0, width, height); //set the display to the background image from BG variable in preload()
... (further code in draw())
}
In essence, I need to stop everything else from running until the button 'done' is clicked, and would appreciate any help with anything to achieve this.
I am trying to make a Contact form with Radio Buttons and Checkboxes for Packages I intend to offer. The first Radio is for the full Package. The Second Radio Button reveals the Checkboxes that breaks the full package into single options.
What I am trying to achieve is when all checkboxes get checked, the first radio gets checked and all checkboxes get unchecked and are hidden. I managed to get the function to work with one little
var radio1 = document.getElementbyID('radio1');
var radio2 = document.getElementbyID('radio2');
var checkgroup = document.getElementbyID('checkgroup');
var check1 = document.getElementbyID('check1');
var check2 = document.getElementbyID('check2');
var check3 = document.getElementbyID('check3');
var check4 = document.getElementbyID('check4');
$(document).change(function () {
if (radio2.checked) {
checkgroup.style.display = "block";
} else {
checkgroup.style.display = "none";
}
});
$(document).change(function () {
if ((check1&&check2&&check3&&check4).checked) {
check1.checked = false;
check2.checked = false;
check3.checked = false;
check4.checked = false;
checkgroup.style.display = "none";
radio1.checked = true;
}
});
Whenever I check the the checkbox that is last in the if() condition (only the last, not the others) it executes the function which misses the point.
My Goal:
If all get Checked, Execute the Function (Uncheck all, Hide the Checkboxes, Switch back to Radio1). If any 3 get checked nothing should happen.
I feel like i'm missing something, I just don't know what.
Change if ((check1&&check2&&check3&&check4).checked)
to if (check1.checked && check2.checked && check3.checked && check4.checked)
I'm confused that it even worked somewhat since you essentially used && between Javascript objects and not (boolean) variables
Try this: https://jsfiddle.net/h95y86gt/22/
Also, I hope getElementbyID is a typo for document.getElementById()
I have two images and I want a button which has an onclick event to switch the background image of a div I have, the problem is the first two clicks work but the third click still returns the second image instead of the first. I tried testing it with background color and it works fine, it switches between the two colors.
I would like a javscript only answer also.
Javascipt
(function() {
var clickMe = document.getElementById('ray');
var theBody = document.getElementById("container");
var image1 = "url(chidi.png)"
var image2 = "url(chidi2.jpg)"
var colorMe = function() {
if(theBody.style.backgroundImage == "" || theBody.style.backgroundImage == image2) {
theBody.style.backgroundImage = image1;
} else {
theBody.style.backgroundImage = image2;
}
console.log(theBody.style.backgroundImage);
}
ray.onclick = colorMe;
}());
I have two boxes. I want to create functions, which will give me some capabilities.
If I click on the black box the red one is shown.
When I click one black box again, I want to hide the red box.
This is what I have done:
var showMeRedBox = document.getElementsByClassName('box2_red')[0]
var blackBox = document.getElementsByClassName('box1_black')[0]
var redBox = document.getElementsByClassName('box1_black')[0]
var hideRedBox = document.getElementsByClassName('box2_red')[0]
var showMe = function(show) {
showMeRedBox.style.display = show
}
blackBox.onclick = function() {
showMe('inline-flex');
}
var hideMe = function(hide) {
hideRedBox.style.display = hide
}
blackBox.click = function() { // here should be seocnd click, when I want to hide the red box
hideMe('none');
}
Do somebody give me advice, how can I do that?
Thank you,
Megi
You can use a variable to save the state of the redBox and then inside click ask for it:
var isHidden = false;
blackBox.click = function() {
if (isHidden) {
isHidden = false;//show the box
} else {
isHidden = true;
hideMe('none');
}
}
You can use AJAX if you're familiar with
Refer AJAX part of https://www.youtube.com/watch?v=rJesac0_Ftw
Hope it helps
I have a <ul> "ul-list-one", which contains a number of checkboxes. If I check the checkbox and click the move button it means that it will move to another <ul> "ul-list-two", and the checked checkbox will be removed from the previous, which here would be "ul-list-one".
In "ul-list-two" I can do the same, and it moves to the next, this time "ul-list-three".
Note: "ul-list-two" and "ul-li-three" will be created dynamically.
Here I have done some work, but how can I be able to create multiple <ul>s dynamically?
$('#mer').click( function() {
var txtBox = "";
var txtstatus = false;
$('input[type="checkbox"]').each (function() {
var t = $(this);
var from = 'checklist';
var val=$("#hidden_id").val();
var to = 'ch';
if (!t.is(':checked')){
var swap = to;
to = from;
from = swap;
} else {
txtstatus = true;
}
$(':checkbox:checked').attr('disabled', true);
$('#'+to).append(t.attr('name', to).parent());
$('#ch').addClass('br');
});
if(txtstatus){
txtBox = "<input type='text' value=''>";
$('#ch').after(txtBox);
}
});
//close buttom code
$('#cls').click( function() {
$('input[type="checkbox"]').each (function() {
var t = $(this);
var from = 'checklist';
var to = 'ch';
if (t.is(':checked')){
var swap = to;
to = from;
from = swap;
}
$(':checkbox:checked').attr('disabled', false);
$(':checkbox:checked').attr('checked', false);
$('#'+from).append(t.attr('name', from).parent());
});
});
Not the prettiest thing I have ever written. If you want to leave the empty ul's, just comment out the removeEmpties call. I didn't worry about checkbox order, but it would be easy to implement in a separate function after the checkbox is moved. I also assumed you wouldn't want them to move backward beyond the initial ul. If you want that functionality, you could just add another else if to the move function.
http://jsfiddle.net/pJgyu/13225/