console log not showing and html isn't changing - javascript

Okay guys, I have a problem. For some reason my JavaScript file isn't keeping track on how many times the user choose the "no" class when he selects an option in the select tags. I'm trying to make it so that when the user selects no in the dropdown list,it keeps track of how many times the user selected no. Any idea on how to keep track how many times the user selects no without Jquery in javascript?
<head>
<meta charset="utf-8" />
<meta name="quiz" content="myown quiz" />
<title>Quiz</title>
</head>
<body>
<script type="text/javascript" src="machine.js"></script>
<link rel="stylesheet" type="text/css" href="quizformatting.css">
<h1>Choose the major right for you</h1>
<pre>
<form>
Do you like enjoy programming?
<select>
<option class="choice">Select a value</option>
<option class="program">Yes</option>
<option class="no">No</option>
</select>
Do you enjoy 2d animation and 3d animation?
<select>
<option class="choice">Select a value</option>
<option class="art">Yes</option>
<option class="no">no</option>
</select>
Do you like music
<select>
<option class="choice">Select a value</option>
<option>Yes</option>
<option class="no">no</option>
</select>
What are your favorite pastimes?
<select>
<option class="choice">Select a value</option>
<option class="music">Listening to music</option>
<option class="program">making websites</option>
<option class="art">Drawing</option>
<option class="no">None of these</option>
</select>
Out of all the activities you like to do, which one do you enjoy the most?
<select>
<option class="choice">Select a value</option>
<option class="art">Painting and drawing</option>
<option class="music">Playing instruments</option>
<option class="art">Drawing</option>
<option class="no">None of these</option>
</select>
Would you be interested in making art or coding for video games?
<select>
<option class="choice">Select a value</option>
<option class="program">I would be interested in learning the programming languages used to create the scripting for games</option>
<option class="art">I would like to the models and the environment for modeling</option>
<option class="no">I'm not interested in either of these options</option>
</select>
Do you enjoy making websites or learning how to sing?
<select>
<option class="choice">Select a value</option>
<option class="music">Learning how to sing</option>
<option class="program">making websites for projects</option>
<option class="no">I'm not interested in any of this</option>
</select>
Do you enjoy listening to music more or making programming applications?
<select>
<option class="choice">Select a value</option>
<option class="music">I would like to listen to music</option>
<option class="program">Programming is my thing</option>
<option class="art">I'm more of a drawer</option>
<option class="no">I don't like any of these options</option>
</select>
Which skillset are you more interested in learning?
<select>
<option class="choice">Select a value</option>
<option class="music">Learning the notes of instruments</option>
<option class="program">Learning the language of javascript</option>
<option class="art">I like anime, so I would love to learn how to animate in anime style</option>
<option class="no">I don't want to do any of these options</option>
</select>
Please press the button to get your answer
<button type="button" onclick="Starting();">Click me</button>
</form>
</pre>
<p id="yos">Your answer here</p>
Here is my javascript code:
```javascript
function Starting() {
var artchoices = document.querySelectorAll(".art:checked");
var program = document.querySelectorAll(".program:checked");
var choice = document.querySelectorAll(".choice");
var no = document.querySelectorAll(".no:checked");
var music = document.querySelectorAll(".music:checked");
var x = document.getElementById("yos");
var answer = true;
for (var e = 0; e < choice.length; e++) {
if (choice[e].selected == true) {
answer = false;
break;
}
}
if (answer == false) {
console.log("Make sure you checked all values");
} else {
if (no == 9) {
console.log("Oh, so you don't want to become anything huh");
x.innerHTML = "HEY";
} else {
if (program > artchoices) {
console.log("Congrulations, you are an artist");
}
}
}
window.onload = Starting;
}

You need to check for the length of the list. The node list (what is returned by document.querySelectorAll(".no:checked")) will never equal 9.
if (no == 9)
needs to be
if (no.length === 9)

Related

How do I get the number of selected options

I need some help. I'm trying to get the length of the selected options in my elements with the "no" class(meaning getting the number of selected options with the no class name. Copy and paste in browser to see what I am talking about and select the options yourself to see).
here is my html
function Starting(e) {
e.preventDefault();
var artchoices = document.querySelectorAll(".art");
var program = document.querySelectorAll(".program");
var choice = document.querySelectorAll(".choice");
var no = document.querySelectorAll(".no");
var music = document.querySelectorAll(".music");
var allchoices;
for (var e = 0; e < choice.length; e++) {
if (choice[e].selected == true) {
allchoices = true;
break;
}
}
if (allchoices)
console.log("Please make sure all options are selected");
else {
if (no.length.selected >= choice.length)
console.log("hello");
}
return false;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="quiz" content="myown quiz">
<title>Quiz</title>
</head>
<body>
<script type="text/javascript" src="machine.js"></script>
<link rel="stylesheet" type="text/css" href="quizformatting.css">
<h1>Choose the major right for you</h1>
<pre>
<form>
Do you like enjoy programming?
<select>
<option class="choice">Select a value</option>
<option class="program">Yes</option>
<option class="no">No</option>
</select>
Do you enjoy 2d animation and 3d animation?
<select>
<option class="choice">Select a value</option>
<option class="art">Yes</option>
<option class="no">no</option>
</select>
Do you like music
<select>
<option class="choice">Select a value</option>
<option>Yes</option>
<option class="no">no</option>
</select>
What are your favorite pastimes?
<select>
<option class="choice">Select a value</option>
<option class="music">Listening to music</option>
<option>making websites</option>
<option class="art">Drawing</option>
<option class="no">None of these</option>
</select>
Out of all the activities you like to do, which one do you enjoy the most?
<select>
<option class="choice">Select a value</option>
<option class="art">Painting and drawing</option>
<option class="music">Playing instruments</option>
<option class="art">Drawing</option>
<option class="no">None of these</option>
</select>
Would you be interested in making art or coding for video games?
<select>
<option class="choice">Select a value</option>
<option class="program">I would be interested in learning the programming
languages used to create the scripting for games</option>
<option class="art">I would like to the models and the environment for
modeling</option>
<option class="no">I'm not interested in either of these options</option>
</select>
Do you enjoy making websites or learning how to sing?
<select>
<option class="choice">Select a value</option>
<option class="music">Learning how to sing</option>
<option class="program">making websites for projects</option>
<option class="no">I'm not interested in any of this</option>
</select>
Do you enjoy listening to music more or making programming applications?
<select>
<option class="choice">Select a value</option>
<option class="music">I would like to listen to music</option>
<option class="program">Programming is my thing</option>
<option class="art">I'm more of a drawer</option>
<option class="no">I don't like any of these options</option>
</select>
Which skillset are you more interested in learning?
<select>
<option class="choice">Select a value</option>
<option class="music">Learning the notes of instruments</option>
<option class="program">Learning the language of javascript</option>
<option class="art">I like anime, so I would love to learn how to animate in
anime style</option>
<option class="no">I don't want to do any of these options</option>
</select>
Please press the button to get your answer
<button onclick="Starting(event);">Click me</button>
</form>
</pre>
</body>
</html>
Here is my javascript file:
You can use the :checked pseudo-class to find all of the option elements that are selected. In this case, I've changed the selector you've used in querySelectorAll so that no only has the selected options with the class "no".
As #PatrickRoberts mentions in the comments, using a value attribute is a better idea. For one thing it is semantically correct (options should have a value for form submission).
function Starting(e) {
e.preventDefault();
var artchoices = document.querySelectorAll(".art");
var program = document.querySelectorAll(".program");
var choice = document.querySelectorAll(".choice");
var no = document.querySelectorAll(".no:checked");
var music = document.querySelectorAll(".music");
var allchoices;
for (var e = 0; e < choice.length; e++) {
if (choice[e].selected == true) {
allchoices = true;
break;
}
}
if (allchoices)
console.log("Please make sure all options are selected");
else {
if (no.length >= choice.length)
console.log("hello");
}
return false;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="quiz" content="myown quiz">
<title>Quiz</title>
</head>
<body>
<script type="text/javascript" src="machine.js"></script>
<link rel="stylesheet" type="text/css" href="quizformatting.css">
<h1>Choose the major right for you</h1>
<pre>
<form>
Do you like enjoy programming?
<select>
<option class="choice">Select a value</option>
<option class="program">Yes</option>
<option class="no">No</option>
</select>
Do you enjoy 2d animation and 3d animation?
<select>
<option class="choice">Select a value</option>
<option class="art">Yes</option>
<option class="no">no</option>
</select>
Do you like music
<select>
<option class="choice">Select a value</option>
<option>Yes</option>
<option class="no">no</option>
</select>
What are your favorite pastimes?
<select>
<option class="choice">Select a value</option>
<option class="music">Listening to music</option>
<option>making websites</option>
<option class="art">Drawing</option>
<option class="no">None of these</option>
</select>
Out of all the activities you like to do, which one do you enjoy the most?
<select>
<option class="choice">Select a value</option>
<option class="art">Painting and drawing</option>
<option class="music">Playing instruments</option>
<option class="art">Drawing</option>
<option class="no">None of these</option>
</select>
Would you be interested in making art or coding for video games?
<select>
<option class="choice">Select a value</option>
<option class="program">I would be interested in learning the programming
languages used to create the scripting for games</option>
<option class="art">I would like to the models and the environment for
modeling</option>
<option class="no">I'm not interested in either of these options</option>
</select>
Do you enjoy making websites or learning how to sing?
<select>
<option class="choice">Select a value</option>
<option class="music">Learning how to sing</option>
<option class="program">making websites for projects</option>
<option class="no">I'm not interested in any of this</option>
</select>
Do you enjoy listening to music more or making programming applications?
<select>
<option class="choice">Select a value</option>
<option class="music">I would like to listen to music</option>
<option class="program">Programming is my thing</option>
<option class="art">I'm more of a drawer</option>
<option class="no">I don't like any of these options</option>
</select>
Which skillset are you more interested in learning?
<select>
<option class="choice">Select a value</option>
<option class="music">Learning the notes of instruments</option>
<option class="program">Learning the language of javascript</option>
<option class="art">I like anime, so I would love to learn how to animate in
anime style</option>
<option class="no">I don't want to do any of these options</option>
</select>
Please press the button to get your answer
<button onclick="Starting(event);">Click me</button>
</form>
</pre>
</body>
</html>
Here is my javascript file:
If you have access to jQuery, you can use the following script:
$('form option.no:selected').length

JQuery Set selected option

I have two selection boxes, the default value is - and i want to pick something else for both, my first problem is both fields have dynamic id like prod-685209-Size so i'm having trouble accessing with id.
I have the following HTML:
<select class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
So i executed the following:
document.getElementsByTagName('select')[0].selectedIndex = 2
document.getElementsByTagName('select')[1].selectedIndex = 2
It worked on the front side, showing my new options but it didn't prompt the backend as it is not actually selecting the options. Backend works fine when i click to these options by hand, basically i need another solution to choose these options.
If I don't misunderstood your requirement then you need something like this. Just add two different ids to your select element and attach a change event listener. For example size and color
var s = document.getElementById("size");
var c = document.getElementById("color");
function getSize() {
sizeSelected = s.value;
console.log('size=' + sizeSelected);
}
function getColor() {
colorSelected = c.value;
console.log('color=' + colorSelected);
}
s.addEventListener('change', getSize);
c.addEventListener('change', getColor);
<select id="size" class="sku-attr" name="Size">
<option value="_def">-</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
</select>
<select id="color" class="sku-attr" name="Color">
<option value="_def">-</option>
<option value="Black">Black</option>
<option value="Blue">Blue</option>
</select>
You need to add .validate() after your dom commands to actually prompt the page.

HTML Form that creates a string [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
This is kind of an odd one. Long story short, I'm trying to add strings together using dropdown lists but I'm not quite sure how to go about it and searching for answers has borne no fruit.
I've tried any number of combinations of jquery, java, and HTML but nothing works yet
Example:
Selection 1: first-string
Selection 2: second-string
Selection 3: third string
I also need it to display the result of this on screen somewhere (I was trying to run a function via a button that would add the strings together and display them in a text box but it would only add numbers, not strings)
EDIT: I felt i'd fundementaly misunderstood...well just about everything I tried which is why I didn't share the code. But here we go:
It is suggested you install a color picker to pair with this software
base = "000000";
eye = "FFFFFF";
nose = "000000";
m1c = "FFF000";
m2c = "00FFFF";
species = 1
m1 = 0
m2 = 0
function feli() {
var m1 = document.getElementById("textbox1").value;
var answer = "http://www.felisfire.com/demo.php?s="+species+"&b"="+"base"+"&e="+"eye"+"&n="+"nose"+"&m1="+"m1"+"&m1c="+"m1c"+"&m2="+"m2"+"&m2c="+"m2c";
var textbox3 = document.getElementById('textbox3');
textbox3.value=answer;
}
</script>
Species
<select name=species id=species>
<option value="1">Felidae</option>
<option value="3">Aquus</option>
<option value="8">Scalae</option>
<option value="5">Zerda</option>
<option value="6">Chetae</option>
<option value="10">Aurae</option>
<option value="7">Igneo</option>
<option value="9">Lycreon</option>
<option value="4">Iuridon</option>
<option value="2">Xano</option>
</select>
Marking 1
<select name=m1 onChange = "m1 = this.value">
<option value="1">None</option>
<option value="12">Accents</option>
<option value="41">Anubis (p)</option>
<option value="13">Appaloosa</option>
<option value="15">Back Spots</option>
<option value="124">Badger</option>
<option value="44">Ball Python</option>
</select>
Marking 2
<select name=m1 onChange = "m2 = this.value">
<option value="1">None</option>
<option value="12">Accents</option>
<option value="41">Anubis (p)</option>
<option value="13">Appaloosa</option>
<option value="15">Back Spots</option>
<option value="124">Badger</option>
<option value="44">Ball Python</option>
</select>
<input type="submit" name="button" id="button1" onclick="feli" value="Design!" />
<input type="text" name="textbox3" id="textbox3" readonly="true"/>
</div>
It's simple to combine the string using JQuery.
$("input").on("change", function () {
$('#combine').val(($('#str1').val() +" "+ $('#str2').val()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="str1" />
<input type="text" id="str2" />
<input type="text" id="combine" />
Hope it helps.
This code works.
If your HTML looks like this.
<select name="">
<option value="">thisis 1</option>
<option value="">thisis 2</option>
<option value="">tisis 3</option>
<option value="">thisis 4</option>
<option value="">thisis 5</option>
</select>
<select name="">
<option value="">thisis 1</option>
<option value="">thisis 2</option>
<option value="">thisis 3</option>
<option value="">thisis 4</option>
<option value="">thisis 5</option>
</select>
<select name="">
<option value="">thisis 1</option>
<option value="">thisis 2</option>
<option value="">thisis 3</option>
<option value="">thisis 4</option>
<option value="">thisis 5</option>
</select>
<textarea name="" id="resulter" cols="30" rows="10"></textarea>
and you jQuery would look like this.
<script>
$(function(){
$('select').change(function(){
// Get the selected option text
var getText = $(this).find('option:selected').text();
// Get the current textarea text
var areaText = $('#resulter').text();
// Concatenate the selected and area text together
$('#resulter').text(areaText + getText);
});
});
</script>

Dynamically creating complex select objects in a web form

I am designing a webform that may capture anywhere from 1 to 150 rows of data giving definitions to what type of data is provided in a given row of a csv. These rows of data are all exactly same but I do not know how many of them will be used at the outset. I would like to start with one row and let the end user click an add button to add a new row. On the W-3 schools website there was a small tutorial on how to do this:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_create
but there are some problems I am seeing. first, it is buggy. If you go to the link and click the 'try it' button it will create a simple select dropdown. Wonderful! However, If you click it again it then creates a blank one, with every subsequent click creating the same. The other problem is that the select element I would need to use is huge (160 possible options) and uses optgroups to keep it separated and intuitive here is a sample:
<select name="data_value" id="data_value_selector">
<optgroup label="Entity Provider">
<option style="margin-left:12px;" value="name">Name</option>
<option style="margin-left:12px;" value="dba">DBA</option>
<option style="margin-left:12px;" value="facility_type">Facility Type</option>
</optgroup>
<optgroup label="Individual Provider"></optgroup>
<optgroup style="margin-left:12px;" label="Name">
<option value="full_name">Full Name</option>
<option value="name_prefix">Prefix</option>
<option value="first_name">First Name</option>
<option value="middle_name">Middle Name</option>
<option value="last_name">Last Name</option>
<option value="name_suffix">Suffix</option>
<option value="pro_suffix">Professional Suffix</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Birth Date">
<option value="full_birth_date">Full Birth Date</option>
<option value="day_of_birth">Day Of Birth</option>
<option value="month_of_birth">Month Of Birth</option>
<option value="year_of_birth">Year Of Birth</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Education">
<option value="education_institution">Education Institution</option>
<option value="education_city">Education City</option>
<option value="education_county">Education County</option>
<option value="education_state">Education State</option>
<option value="education_country">Education Country</option>
<option value="education_start_date">Education Start Date</option>
<option value="education_end_date">Education End Date</option>
<option value="graduation_date">Graduation Date</option>
<option value="degree" >Degree</option>
</optgroup>
<optgroup label="Provider Information"></optgroup>
<optgroup style="margin-left:12px;" label="Address">
<option value="full_address">Full Address</option>
<option value="address_1">Address 1</option>
<option value="address_2">Address 2</option>
<option value="address_city">City</option>
<option value="address_county">County</option>
<option value="address_state">State</option>
<option value="address_zip_code">Zipcode</option>
<option value="address_country">Country</option>
<option value="address_csz">City/State/Zip</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Phone">
<option value="phone_number">Number</option>
<option value="phone_extension">Extension</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Singular Values">
<option value="url">URL</option>
<option value="tin">TIN Number</option>
<option value="email">Email</option>
<option value="dea_registration_number">DEA Regisration Number</option>
<option value="npi_number">NPI Number</option>
<option value="upin_number">UPIN Number</option>
</optgroup>
<optgroup style="margin-left:12px;" label="Provider Values">
<option value="provider_value">Provider Value</option>
</optgroup>
</select>
...And this is not even the entire select object. In the W-3 tutorial it builds each element independently as variables and adds them to each other individually. As you can see this might take some time to write and just seems very bulky. I would like to define the select object once and have it replicated that way (if possible) with every click. I imagine each newly created select object would need a unique name, but I am not 100% sure on that. If that is the case, is there a way to just append a 1 to the name of the first one and so on?
If you want something in jQuery you can use clone() function. See:
$("#data_value_selector").clone().appendTo("#select-box");
Demo.
I changed the name attribute to send a collection of the selected values. You can change this behaviour to a custom name in the click event, if you want:
var newSelect = $("#data_value_selector").clone();
newSelect.attr("name", "newName");
newSelect.appendTo("#select-box");
I hope this helps you.
You could use the cloneNode() method. Here is an example:
http://jsfiddle.net/JKNT4/7/
HTML
<button onclick="addRow()">Add Row</button>
<div id="parent_selector" class="data-row">
<select name="data_value[]">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div id="child_selectors"></div>
Javascript
function addRow() {
var itm = document.getElementById("parent_selector");
var cln = itm.cloneNode(true);
cln.removeAttribute("id");
document.getElementById("child_selectors").appendChild(cln);
}

How to change HTML element select into sub-menu UI?

I want to know using native html element select can I do this add (submenus)
Processes
lack of process
failure to follow process
HTML
<!DOCTYPE html>
<html>
<body>
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
</body>
</html>
The code above just allows me to define sub-sections, but no seperate menu ui in parent ui? Is there a way I can change this.
thanks
No, standard selects do not allow for sub-menus, but there are some fairly simple jQuery solutions that use unordered lists.
These are both pretty good / simple solutions:
http://www.givainc.com/labs/mcdropdown_jquery_plugin.cfm
http://p.sohei.org/jquery-plugins/clickmenu/
Not using native HTML that I'm aware of, however you could use jQuery to do this.
<Select id="cartype">
<option value="Select">Select Car Type</option>
<option value="Swedish Cars">Swedish Cars</option>
<option value="German Cars">German Cars</option>
</Select>
<select id="carDetail">
<option value="unset">Select Car Type First</option>
</select>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready( function () {
$.fn.addOption = function(optText, optValue){
var option = new Option(optText, optValue);
return this.append(option);
};
$("#cartype").change(function() {
$("#carDetail option").remove();
switch ($("#cartype").val())
{
case "Swedish Cars":
$("#carDetail").addOption("Volvo", "volvo");
$("#carDetail").addOption("Saab", "saab");
break;
case "German Cars":
$("#carDetail").addOption("Mercedes","mercedes");
$("#carDetail").addOption("Audi","audi");
break;
default:
$("#carDetail").addOption("Select Car Type First","unset");
}
});
});
</script>

Categories

Resources