I have been playing around with codepen.io and came across this particular issue for which I am not able to resolve.
My following pen does not work in codepen but works locally on my machine, I am not sure if I have to do something extra or enable a feature on codepen to make it work.
Any help most appreciated :)
HTML
<span>Background color:</span>
<select id="background">
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
</select>
<span>Width:</span>
<select id="width">
<option value="100px">100px</option>
<option value="200px">200px</option>
<option value="300px">300px</option>
</select>
<span>height:</span>
<select id="height">
<option value="100px">100px</option>
<option value="200px">200px</option>
<option value="300px">300px</option>
</select>
<br/>
<br/>
<div id="content" style="background:red; width:100px; height:100px;"></div>
JS
// array of virtual DOM objects
var arraySelect = document.getElementsByTagName('select');
var content = document.getElementById('content');
// function
function dropdownStyles() {
// apply the value from the select options (when applied) has the style values for content.
var style = this.id;
var value = this.value;
content.style[style] = value;
}
// create a loop to iterate each select option in document add an event listener to each.
for( var i = 0; i < arraySelect.lenght; i++ ){
// with dropdownStyles() the function will get executed so that is why we don't add the brackets
arraySelect[i].addEventListener('change',dropdownStyles);
}
Red box changer - codepen
Here is the working code.
var arraySelect = document.querySelectorAll('select');
var content = document.getElementById('content');
arraySelect.forEach(function(v){
v.addEventListener('change',dropdownStyles);
})
function dropdownStyles() {
var style = this.id;
var value = this.value;
content.style[style] = value;
}
this code will solve your problem.
There is a typo:
it's length not lenght
for( var i = 0; i < arraySelect.lenght; i++ ){
i < arraySelect.lenght
There is lenght ,not length.
Related
Okay to start of this is my main script that does the calculation for my specific problem, I don't understand why it doesn't output the correct result which is "Success" on the specified ID that I put it on. Is it something wrong with the index evaluations or I didn't properly get the index from my form.
function calculatePrice(){
var startLeague;
var targetLeague;
var startDiv;
var targetDiv;
var temp = document.getElementById("startLeague");
startLeague = temp.options[temp.selectedIndex].value;
startLeague = temp.indexOf(startLeague);
temp = document.getElementById("targetLeague");
targetLeague = temp.options[temp.selectedIndex].value;
targetLeague = temp.indexOf(targetLeague);
temp = document.getElementById("startDiv");
startDiv = temp.options[temp.selectedIndex].value;
startDiv = startDiv.indexOf(startDiv);
temp = document.getElementById("targetDiv");
targetDiv = temp.options[temp.selectedIndex].value;
targetDiv = temp.indexOf(targetDiv);
if(startLeague >= targetLeague){
document.getElementById("price-box").innerHTML = "Cannot Calculate";
//Ignore this line
setTimeout(initPrice, 5000);
}else{
if(startDiv >= targetDiv){
document.getElementById("price-box").innerHTML = "Cannot Calculate";
//Ignore this line
setTimeout(initPrice, 5000);
}else{
document.getElementById("price-box").innerHTML = "Success";
}
}
}
This is what I have for my HTML code and represents the values to be taken from the HTML itself via DOM.
<select id="startLeague">
<option value="Someval">0</option>
<option value="Someval1">1</option>
<option value="Someval2">2</option>
<option value="Someval3">3</option>
<option value="Someval4">4</option>
</select>
<select id="targetLeague">
<option value="Someval">0</option>
<option value="Someval1">1</option>
<option value="Someval2">2</option>
<option value="Someval3">3</option>
<option value="Someval4">4</option>
</select>
And so on...
This is my output paragraph that is used to check the value, so far when I click the button it doesn't do anything and remains blank, what is the problem?
<p id="price-box" style="margin: 0; padding: 0;"></p>
Clicking on the button as mentioned above doesn't do anything whereas it should be working.
<button type="button" onclick="calculatePrice()">Calculate</button>
As a final note, yes I have included the following line on the HTML head tag
<script src="price.js"></script>
I would like to start by saying I am very new to jquery and javascript I rarely use it, however I now find myself in a position where I need to make use of it.
What I am trying to do
I am trying to let admin-user upload matches to db for a round in a competition, thus building the schedule for round X....hope that makes sense
What should happen
if user selects, as an example, 4 from the dropdown box 8 input fields should be created, thus allowing user to enter the 2 teams which will play in each round in each match.
I have tried to code this, (please dont laugh) but the logic and code is completely wrong, if anyone can be so kind to assist me with this problem it would be much appreciated, possibly allowing me to build from this in the future.
JFiddle
https://jsfiddle.net/leela89/zvss0f8L/#&togetherjs=RApSQ2E6Sr
Code
<select id="nrGames" name="nrGame">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<script type="text/javascript">
//create input element for nr games
$("#nrGames").change(function(){
var value = $(this).val;
var nr = 0;
while(nr < value){
$('#games').add('input');
nr++;
}
})
</script>
<!--APPEND INOUT TEXT -->
<div id="games">
</div>
Try to .append() the new elements into the target element,
$("#nrGames").change(function() {
var value = +$(this).val();
value *= 2;
var nr = 0;
var elem = $('#games').empty();
while (nr < value) {
elem.append($('<input>',{name : "whateverNameYouWant"}));
nr++;
}
});
Also .val() is a function not a property.
DEMO
Small update: Different elements for player in each team will be helpful
$("#nrGames").change(function() {
var value = +$(this).val();
var nr = 0;
var elem = $('#games').empty();
while (nr < value) {
elem.append($('<input>',{name : "Team1Player"+nr}));
elem.append($('<input>',{name : "Team2Player"+nr}));
nr++;
}
});
I am new to javascript and also stackoverflow.
Please bare my english knowledge and javascript knowledge.
Here it goes......
I have Select option dropdown in my page. And I have divs.
below is my code this is working fine in firefox but not in ie or google chrome
function show_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = 'block';
}
}
function hide_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = 'none';
}
}
and this is my html code.........
<select style="width:205px;padding:4px;margin-left:1px;">
<option onClick="show_visibility('foo1','foo4');hide_visibility('foo2','foo3', 'foo4','foo5','foo6','foo7') ">Program Eligibility Report</option>
<option onClick="show_visibility('foo2','foo5');hide_visibility('foo1','foo3', 'foo4','foo6') ">Audit Report</option>
<option onClick="show_visibility('foo3','foo6');hide_visibility('foo1','foo2', 'foo4','foo5') ">Status Change Report</option>
<option value="option4">Family Affiliation Audit Report</option>
<option value="option5">Marketing Category Report</option>
<option value="option6">Pending Approval Report</option>
</select>
For the above code perfectly working in Firefox, but not in IE
Kindly help me here.
You need to hook into the onchange event of the SELECT itself, and from there determine which option was selected.
<select onchange="selChange(this)">...
JS:
function selChange(select) {
selectedValue = select.options[select.selectedIndex].value;
if(selectedValue == 'whatever') {
....your code...
}
}
I want to loop over a Dropdownlist and write the value of the selected Item in a label.
I've done it before with a selection of Radio buttons but with the dropdownlist it won't work.
Now, some Code.
Here is the generated HTML Code Values are not interesting.
<select id="alternativeNumbers" name="alternativeNumbers">
<option value="1_A">Text</option>
<option value="2_B">Text</option>
<option value="3_C">Text</option>
<option value="4_D">Text</option>
<option value="5_E">Text</option>
<option value="6_F">Text</option>
</select>
The Code to bind the event to the Dropdownlist.
$(function () {
var dropdown = document.getElementsByName("alternativeNumbers");
$(dropdown ).change(function () {
updateAlternativeDropdown();
});
});
And finally the method which is called by the event. This should fill the labels.
function updateAlternativeDropdown() {
var dropdown = document.getElementsByName("alternativeNumbers");
var lengthDropDown = addAlternativeArticleNumberDropdown.length;
for (var i=0; i < lengthDropDown; i++)
{
//This alert is for the behavior of the output!
alert(addAlternativeArticleNumberDropdown[i].value);
if (addAlternativeArticleNumberDropdown[i].selected) {
var valueOfDropdown = addAlternativeArticleNumberDropdown[i].value;
var splittedValues = valueOfDropdown.split("_");
document.getElementById("label1").innerText = splittedValues[0];
document.getElementById("label2").innerText = splittedValues[1];
}
}
};
I hope this is enough information, now the Problem / Current behavior:
The method updateAlternativeDropdown() is called fine but then the alert inside the loop returns the value of first element, value of the selected element and this 3 times. (I guess because of the 6 elements in this element)
Furthermore because of this my if-statement isn't entered. Currently I#m kind of clueless where this problem comes from.
Thanks in advance.
You don't have to iterate dropdown's options. You can access selected option like this:
dropdown.options[dropdown.selectedIndex].value
Update your updateAlternativeDropdown function:
function updateAlternativeDropdown() {
var dropdown = document.getElementById("alternativeNumbers"),
splittedValues = dropdown.options[dropdown.selectedIndex].value.split('_');
document.getElementById("label1").innerHTML = splittedValues[0];
document.getElementById("label2").innerHTML = splittedValues[1];
}
$('#alternativeNumbers').change(updateAlternativeDropdown);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
label1: <span id="label1">-</span><br />
label2: <span id="label2">-</span><br />
<select id="alternativeNumbers" name="alternativeNumbers">
<option value="1_A">Text</option>
<option value="2_B">Text</option>
<option value="3_C">Text</option>
<option value="4_D">Text</option>
<option value="5_E">Text</option>
<option value="6_F">Text</option>
</select>
working Example
How can I copy all options of one select element to another? Please give me the easiest way, I'm allergic to looping.
Please help me. Thanks in advance!
One of the easiest ways without looping, is using jquery (select1 = id of select 1, select2 = id of select 2):
$('#select1 option').clone().appendTo('#select2');
Without jquery:
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
select2.innerHTML = select2.innerHTML+select1.innerHTML;
html:
<select id="selector_a">
<option>op 1</option>
<option>op 2</option>
</select>
<select id="selector_b">
<option>op 3</option>
<option>op 4</option>
</select>
javascript:
var first = document.getElementById('selector_a');
var options = first.innerHTML;
var second = document.getElementById('selector_b');
var options = second.innerHTML + options;
second.innerHTML = options;
I maintain some IE11 "compatibility mode" pages which run like IE7, and the pure javascript solution above did not work for me. The first opening option tag would inexplicably be stripped using a direct innerHTML assignment.
What worked for me was explicitly appending each option in the select's option collection to the new select. In this instance it was to support an AJAX call, so I cleared the list first, but I'm sure this could append as well.
var fromSelect = document.getElementById('a');
var toSelect = document.getElementById('b');
toSelect.innerHTML = "";
for (var i = 0; i < fromSelect.options.length; i++) {
var option = fromSelect.options[i];
toSelect.appendChild(option);
}
Hopefully this helps anyone else who is stuck in compatibility mode, since this page was at the top of the list in a Google search.
use jQuery foreach?
$("#the-id option").each(function() {
var val = $(this).val();
var txt = $(this).html();
$("the-other-id").append(
$('<option></option>').val(val).html(txt);
);
});
you can do that easily via jquery:
<select id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
$(document).ready(function(){
$("#sel2").html($("#sel1").html());
});
$('#cloneBtn').click(function() {
var $options = $("#myselect > option").clone();
$('#second').empty();
$('#second').append($options);
$('#second').val($('#myselect').val());
});
This is used to copy the value and the innerHTML. Its better to copy the key,
value and the OPTIONS.i.e. the selected value and the options.
Its an older thread but I hope the following helps someone. No loops at all.
function copyFromMultiselect(srcId,targetId, allFlag){
if(allFlag){
$("#"+targetId).append($("#"+srcId).html());
$("#"+srcId).empty();
}else{
$("#"+targetId).append($("#"+tabContentId+" #"+srcId+" option:selected"));
}
}
//first ans can be modified as follows to get direct result while using dropdown
<html>
<head>
<script>
onload
function myFunction1(){
var first = document.getElementById('selector_a');
var second = document.getElementById('selector_b');
var chk=document.getElementById('selector_main').value;
if(chk == "1")
var options = first.innerHTML;
else
var options = second.innerHTML;
var out = document.getElementById('selector_c');
out.innerHTML = options;
}
</script>
</head>
<body onload="myFunction1()">
<select id="selector_main" onchange="myFunction1()">
<option value="none" disabled>--choose--</option>
<option value="1">option_A</option>
<option value="2">option_B</option>
</select>
<select id="selector_a" hidden>
<option value="none" disabled>--select--</option>
<option>op1</option>
<option>op 2</option>
</select>
<select id="selector_b" hidden>
<option value="none" disabled>--select--</option>
<option>op 3</option>
<option>op 4</option>
</select>
<select id="selector_c">
<option>--select col1 first--</option>
</select>
</body>
</html>