I'm a beginner at JavaScript. I'm sorry if I cannot explain clearly what I need.
I am trying to design a page with some questions. The answers must be typed in a textbox.
I am using a Switch Statement to generate different comments to all acceptable answers.
As for answers that are not accepted, I would like to have more than the default message.
For example, if the user types an unaccepted answer for the first time, a message will show up, like "That is not an acceptable answer". On the user's second unaccepted answer a different message would show up, like "Please try again"... And so on for about five times, and then it would loop back to the first default message.
I just don't know how to make that happen...
This is what I have so far:
function myFunction() {
var text;
var colors = document.getElementById("myInput").value;
switch (colors) {
case "White":
text = "White is a nice color.";
break;
case "Blue":
text = "I also like blue. It reminds me of the ocean.";
break;
case "Red":
text = "Red is also nice.";
break;
default:
text = "That is not an acceptable answer";
}
document.getElementById("comment").innerHTML = text;
}
<p>What is your favorite color from the USA flag?</p>
<input id="myInput" type="text">
<button onclick="myFunction()">Answer</button>
<p id="comment"></p>
You need to have an array for the number of messages, the user needs to get when they have sent an answer.
var count = 0;
var messages = ["That is not an acceptable answer.", "Please try again!", "Still wrong.", "I don't understand.", "Consider visiting the 'help page' before moving on."];
Based on that count, show the message in the default case.
default:
text = messages[count%messages.length];
count++;
Full Working Snippet
var count = 0;
var messages = ["That is not an acceptable answer.", "Please try again!", "Still wrong.", "I don't understand.", "Consider visiting the 'help page' before moving on."];
function myFunction() {
var text;
var colors = document.getElementById("myInput").value;
switch (colors) {
case "White":
text = "White is a nice color.";
break;
case "Blue":
text = "I also like blue. It reminds me of the ocean.";
break;
case "Red":
text = "Red is also nice.";
break;
default:
text = messages[count%messages.length];
count++;
}
document.getElementById("comment").innerHTML = text;
}
<p>What is your favorite color from the USA flag?</p>
<input id="myInput" type="text">
<button onclick="myFunction()">Answer</button>
<p id="comment"></p>
var counter = 0;
function myFunction() {
var text;
var colors = document.getElementById("myInput").value;
switch(colors) {
case "White":
text = "White is a nice color.";
break;
case "Blue":
text = "I also like blue. It reminds me of the ocean.";
break;
case "Red":
text = "Red is also nice.";
break;
default:
text = getText(counter++);
}
counter = counter > 5 ? 0 : counter;
document.getElementById("comment").innerHTML = text;
}
function getText(counter) {
switch(counter):
case 1:
return "some text";
case 2:
return "some text";
...
}
Related
How to add p (Paragraph) tag inside selected text like bold.
document.queryCommand("insertParagraph") is not working inside the code.
function makeBold() {
const state = document.queryCommandState("bold");
let message;
switch (state) {
case true:
message = "The bold formatting will be removed from the selected text.";
break;
case false:
message = "The selected text will be displayed in bold.";
break;
default:
message = "The state of the 'bold' command is indeterminable.";
break;
}
document.querySelector("#output").textContent = `Output: ${message}`;
document.execCommand('bold');
}
<div contenteditable="true">Select a part of this text!</div>
<button onclick="makeBold();">Test the state of the 'bold' command</button>
<hr>
<div id="output"></div>
I am working on a browser button style game, but when i get to a certain point there is a dead button, and i cannot find any problems with it
function L2right1() {
if(hasSword == true){
q.innerHTML = "You walk down the hall";
option1.setAttribute("onclick","stabwall1()");
option1.innerHTML = "Keep walking";
option2.setAttribute("onclick", "goback1()");
option2.innerHTML = "Go back";
}
if(hasSword == false){
q.innerHTML = "You end up in a small room with nothing but a hole in the wall.";
option1.setAttribute("onclick","goback1()");
option1.innerHTML = "Go back";
option2.setAttribute("onclick", "trylookaround()");
option2.innerHTML = "Look around";
}
}
function stabwall1() {
if(opendoor == true){
q.innerHTML = "burp";
option1.setAttribute("onclick","continue2()");
option1.innerHTML = "Enter the room";
option2.setAttribute("onclick", "goback1()");
option2.innerHTML = "Go back";
}
if(opendoor == false){
q.innerHTML = "You end up in a small room with nothing but a hole in the wall. it looks like you daggar may fit in it";
option1.setAttribute("onclick","goback1()");
option1.innerHTML = "Stab wall ig";
option2.setAttribute("onclick", "goback1()");
option2.innerHTML = "Go back";
}
when i run this, the button simply will not work, and if i reference another function, it works.
is there a problem here or is it something wrong with the variable perhaps? in that case, i could send the full code
this is a noob question:
I'm defining a button in HTML like this:
<div>
<input class="btn-change" type="button" value="Select good points" />
</div>
To avoid showing too many buttons I'd like the button to toggle between
value="Select good points"
and
value="Select bad points
So in javascript i'm using
$(".btn-change").on("click", function() {
alert("you pressed the " + nextMark + " button");
switch(nextMark) {
case "bad":
nextMark = "good"
document.getelementsbyclassname("btn-change").value="Select good points";
break;
case 'good':
nextMark = "bad"
$("btn-change").value = "Select bad points";
break;
}
}
The nextMark var changes the colour of marks placed on a leaflet map depending on the value of the button.
The alert shows the case structure is working but the button value isn't changing - what is the correct way of doing this?
jsfiddle right here
To assign a value to the input using JQuery you need to use .val() and not .value
var nextMark = "good";
$(".btn-change").on("click", function() {
switch (nextMark) {
case "bad":
nextMark = "good";
$(".btn-change").val("Select good points");
break;
case 'good':
nextMark = "bad";
$(".btn-change").val("Select bad points");
break;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input class="btn-change" type="button" value="Select good points" />
</div>
You need to specify index to document.getElementsByClassName("btn-change")[0].value = as 0
var nextMark = "good";
$(function(){
$(".btn-change").on("click", function() {
alert("you pressed the " + nextMark + " button");
switch(nextMark) {
case "bad":
nextMark = "good"
document.getElementsByClassName("btn-change")[0].value = "Select good points";
break;
case 'good':
nextMark = "bad"
document.getElementsByClassName("btn-change")[0].value = "Select bad points";
break;
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input class="btn-change" type="button" value="Select good points" />
</div>
First, you're missing an ending ); to close of the … .on("click" ….
If you are using jQuery, you need to remember to include that first (at the top in <head>), then you should define the JavaScript sheet later. Common practice is at the end, right before the </body> tag.
<script type="text/javascript" src="js.js"></script>
</body>
Next, for the alert, nextMark is not defined.
You can do that with this. when using jQuery, you should keep to it, so use $(this).
Put this inside the function to define nextMark:
var nextMark = $(this);
Once that is done, you need to get the value of it, unless it will say you pressed the [object Object] button. You do that by adding .val() at the end of the target with jQuery; so nextMark.val() inside the alert.
Now to make it switch, you could use a simple if-else statement to switch between the two with:
if (nextMark.val() == "Select good points") {
nextMark.val("Select bad points");
} else {
nextMark.val("Select good points");
}
If you want to use switch, then at least to make it work you need to give it what case it is. What goes inside the (…) of the switch is the case it will use to check.
If I put switch(x) and define x as var x = 1 or var x = "one, we will use this to decide which case to use:
case 1: or case "one": will be executed.
var x = 1;
var y = "one";
switch(y) {
case 1:
// "y" is not 1.
break;
case "one":
// "y" is "one", so this will be exectuted.
break;
}
Therefore, we need to define when the button is "good" or "bad". You could do this by using the literal value, like:
var myMark = $(this).val();
switch(myMark) {
case "Select bad points":
$(this).val("Select good points");
break;
case 'Select good points':
$(this).val("Select bad points");
break;
}
$(".btn-change").on("click", function() {
var nextMark = $(this);
alert("you pressed the " + nextMark.val() + " button");
/* Optional method: */
// if (nextMark.val() == "Select good points") {
// nextMark.val("Select bad points");
// } else {
// nextMark.val("Select good points");
// }
var myMark = $(this).val(); /* or var myMark = nextMark.val(); */
switch(myMark) {
case "Select bad points":
$(this).val("Select good points");
break;
case 'Select good points':
$(this).val("Select bad points");
break;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- jQuery included in this example to make it work -->
<div>
<input class="btn-change" type="button" value="Select good points" />
</div>
I have my JSON file and it is just an object not any array.
{"name":"Autogen Program","start":"2014-05-04","end":"2014-10-12","status":"Completed"}
I am trying to assign value from JSON into HTML but I am unable to do so
$(function() {
$.getJSON('http://localhost:8080/GChartServlet/data1.json', function(statusDataSet) {
$.each(statusDataSet, function(i) {
var color;
switch(i.status) {
case "In Progress":
color = "yellow";
break;
case "Pending" :
color = "red";
break;
case "Completed" :
color = "green";
break;
}
if(i.name=="Autogen Program") {
$("#stat1").append(i.status).css('background-color', color);
}
});
});
HTML Code :--
<tr>
<form action="status1.asp">
<td>
<textarea readonly style="overflow:hidden" id="stat1" cols="12" rows="1" autofocus >
</textarea>
</td>
</form>
Can you please help me with same or suggest me where I am going wrong ?
Regards,
If you want to stick to your $.each than you need to make sure the returned result is an array:
statusDataSet = (statusDataSet instanceof Array) ? statusDataSet : [statusDataSet];
And $.each(function(i)) should be $.each(function(i, item)) because your i is the index not the item (object)
Hope that helps
http://jsfiddle.net/bv1br9tL/
If your JSON isn't a array, then you don't need the $.each loop. Just leave it out:
$(function() {
$.getJSON('http://localhost:8080/GChartServlet/data1.json', function(statusDataSet) {
var color;
switch(statusDataSet.status) {
case "In Progress":
color = "yellow";
break;
case "Pending" :
color = "red";
break;
case "Completed" :
color = "green";
break;
}
if(statusDataSet.name=="Autogen Program") {
$("#stat1").append(statusDataSet.status).css('background-color', color);
}
}
});
I am new to Dojo and working with someone else's code. Currently, this function looks to see the value of a dropdown box. Based on that value, it adds another form box, on the fly, for a user to fill out. In all the examples I have, I've only seen the function create one added form box. In a particular case, though, I'd like to add a second row with another form box. I thought maybe repeating the line twice would do the trick, but it doesn't. Any thoughts how to do this? Thanks in advance...
Switch Statement:
if (form_row != null)
dojo.destroy(form_row);
//Add the correct new field to the form.
switch (inquiry.selectedIndex) {
case place_order:
html = this.create_form_row(id, "Account Number");
break;
case order_status:
html = this.create_form_row(id, "Order Number");
break;
case telalert_signup:
html = this.create_form_row(id, "Account Number");
break;
case invoice_questions:
html = this.create_form_row(id, "Invoice Number");
break;
case new_option:
html = this.create_form_row(id, "Invoice Number");
(WANT TO CREATE A SECOND ROW HERE!)
break;
default:
}
Function being called:
create_form_row: function(id, label) {
//Container
var a = dojo.create("div", { id: id, className: "question", style: "padding-top:4px;" });
//Label
var b = dojo.create("div", { className: "label", innerHTML: label, style: "margin-top:8px;" }, a);
//Field
var c = dojo.create("div", { className: "field" });
var d = dojo.create("span", { className: "full_number_span span" });
var e = dojo.create("input", { type: "text", className: "textbox acct_num", name: label }, d);
dojo.place(d, c);
dojo.place(c, a);
return a;
}
If you tried
case new_option:
html = this.create_form_row(id, "Invoice Number");
html = this.create_form_row(id, "SOMETHING ELSE");
break;
it wouldn't work because you would just overwrite the html variable and throw away the first one.
You can either change stuff so that html is supposed to be a list of nodes or you can try wrapping your two form nodes inside a single one
var html = dojo.create('div');
dojo.place(this.create_form_row(...), html);
dojo.place(this.create_form_row(...), html);