I have a series of buttons created from a database, they are set to active or disabled based on a value in the database.
I am trying to create a script that sees what value the button has and changes it to the other state.
My buttons
<input type='button'
name='activebutton'
id='actbutton11'
value='Active'
class='activebutton'
/>
My script currently looks like this, it is currently unable to differentiated between active and disabled buttons.
I can also get it to change the buttons value but it doesn't change the value of C if the method is called again.
I want the user to be able to call the new appropriate method once a button has changed state.
$(document).ready(function(){
$(".activebutton").click(function(){
var c = $(this).val();
// alert(c)
if(c = "Active")
{
var answer = confirm("Disable button?")
if (answer)
{
var $inputElement = $(this),
$("activebutton").val("Disabled");
}
}
else
{
var answer = confirm("Activate button?")
var $inputElement = $(this),
{
$("activebutton").val("Active");
}
}
});
});
You can do this:
$(document).ready(function () {
$(".activebutton").click(function () {
var $inputElement = $(this),
c = $(this).val();
if (c === "Active") {
var answer = confirm("Disable button?");
if (answer) $inputElement.val("Disabled");
} else {
var answer = confirm("Activate button?");
if (answer) $inputElement.val("Active");
}
});
});
FIDDLE DEMO
Here is the working code,
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function () {
$(".activebutton").click(function(){
var answer;
var c = $(this).val();
if(c == "Active")
{
answer = confirm("Disable button?")
if (answer) {
$(".activebutton").val("Disabled");
}
} else if (c == "Disabled"){
answer = confirm("Activate button?");
if (answer) {
$(".activebutton").val("Active");
}
}
});
});
</script>
</head>
<body>
<input type='button'
name='activebutton'
id='actbutton11'
value='Active'
class='activebutton'
/>
</body>
</html>
Related
This is the way I approached it. Please help:
Search
<script type="text/javascript">
var criteria = document.getElementById("search").val().toLowerCase();
if (criteria == "crosshatching") {
document.getElementById("searchBtn").onclick = function() {
window.location.href = "https://www.youtube.com/watch?v=117AN3MQuVs";
}
}
</script>
There was no scope for the variable criteria inside the function.
Also .val() is for jQuery, instead use Javascript's .value.
I've modified your code.
Please check the working code below :
document.getElementById("searchBtn").onclick = function() {
var criteria = document.getElementById("search").value.toLowerCase();
if (criteria == "crosshatching") {
alert("Matching");
window.location.href = "https://www.youtube.com/watch?v=117AN3MQuVs";
} else {
alert("NOT Matching");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="search" id="search"></textarea>
<button id="searchBtn">Search</button>
You need to check the value of your input inside the event handler. In addition, as pointed out in the comments, use value instead of val().
document.getElementById('searchBtn').addEventListener('click', function() {
var criteria = document.getElementById('search').value.toLowerCase();
if (criteria === "crosshatching") {
console.log('You would be redirected here!')
location.href = 'https://www.youtube.com/watch?v=117AN3MQuVs'
} else {
console.log('No redirect. You wrote: ' + criteria)
}
})
<input id="search" type="text"/>
<button id="searchBtn">Search</button>
I've got a while loop with multiple buttons, they are like this:
<button onclick="confirmDelete()" value="<?php echo $game['id'];?>" name="deleteButton">Delete </button>
It is followed by the following confirm message:
<script>
function confirmDelete() {
var r = confirm(" **HERE I WANT THE ID TO START WITH** ");
if (r == true) {
// delete
} else {
// cancel
}
}
</script>
Each button has his own value, but now i want that value in my javascript when i click on that button. I tried multiple things but cant make it work.
EDIT:
If someone can tell me an better/easier way to do this, you're welcome to tell me
Use your function with this argument, i.e.:
<button onclick="confirmDelete(this)" id="myButton" value="someId" name="deleteButton">Delete </button>
<script>
function confirmDelete(elem) {
var r = confirm(" **HERE I WANT THE ID TO START WITH** ");
var theValue = elem.value; //someId
var theId = elem.id; //myButton
if (theValue == "True") {
alert("True")
} else {
alert("False")
}
}
</script>
LIVE DEMO:
http://codepen.io/anon/pen/QyZgqO
Pass the game ID into the confirmDelete function as a parameter
<button onclick="confirmDelete(<?php echo $game['id'];?>)" name="deleteButton">Delete </button>
<script>
function confirmDelete(id) {
var r = confirm(id);
if (r == true) {
// delete
} else {
// cancel
}
}
</script>
<body>
<input type="radio" name="other_charges" value="To Pay" >To Pay
<input type="radio" name="other_charges" value="COD" >COD
<input type="submit" onclick="sum_cash()"/>
</body>
here is my html ...in this i am having two radio buttons with different values and i have called a function using onclick event....here is the code...
<script type="text/javascript">
function sum_cash() {
var elements_ocharges = document.getElementsByName('other_charges');
for (var i = 0; i < elements_ocharges.length; i++) {
if (elements_ocharges[i].checked)
value_ocharges = elements_ocharges[i].value;
}
var val_ocharges=value_ocharges;
if (val_ocharges=="To Pay") {
alert("pay");
}
if (val_ocharges=="COD") {
alert("cod");
}
if ((val_ocharges!="COD") && (val_ocharges!="To Pay") ) {
alert("hi");
}
}
</script>
Now in the function, I am checking the value of the radio button selected. If the user chooses the Pay radio button then on clicking the submit button it alerts the user for payment. When the user chooses the COD radio button then on submitting it alerts COD.
What I want is that when the user has selected nothing and clicked on the submit button then it should alert the user. Unfortunately, it is not checking the condition. Can anyone please help me?
You may try like this:
<script type="text/javascript">
function sum_cash()
{
var elements_ocharges = document.getElementsByName('other_charges');
var value_ocharges = null;
for (var i = 0; i < elements_ocharges.length; i++)
{
if (elements_ocharges[i].checked)
value_ocharges = elements_ocharges[i].value;
}
var val_ocharges=value_ocharges;
if(val_ocharges=="To Pay")
{
alert("pay");
}
else if(val_ocharges=="COD")
{
alert("cod");
}
else
{
alert("hi");
} }
</script>
your problem is this conditional near the top:
if (elements_ocharges[i].checked)
value_ocharges = elements_ocharges[i].value;
since neither radio button is checked, value_ocharges is never set. this will cause an error when you attempt to access the value with var val_ocharges=value_ocharges; you should set the value of value_ocharges to something (null is fine) before entering your loop, then everything will work:
<script type="text/javascript">
function sum_cash()
{
var elements_ocharges = document.getElementsByName('other_charges');
var value_ocharges = null;
for (var i = 0; i < elements_ocharges.length; i++)
{
if (elements_ocharges[i].checked)
value_ocharges = elements_ocharges[i].value;
}
var val_ocharges=value_ocharges;
if(val_ocharges=="To Pay")
{
alert("pay");
}
if(val_ocharges=="COD")
{
alert("cod");
}
if ((val_ocharges!="COD") && (val_ocharges!="To Pay") )
{
alert("hi");
}
}
</script>
Try this ,
else if ((val_ocharges =="")
{
alert("hi");
}
Hope this helps!!
First, set your value_ocharges above the for loop:
var value_ocharges = false;
Then, instead of:
if ((val_ocharges!="COD") && (val_ocharges!="To Pay") ) {
alert("hi");
}
use this outside of the loop:
if (!val_ocharges){
alert("hi");
}
Basically, this checks if val_ocharges is defined somewhere in the loop, and if it's not, it triggers the alert.
I'm trying to make a little flashcard quiz game and I'm trying to implement a feature where someone can enter text into an input area and after they press enter the word "Correct" or "Incorrect" is flashed on the screen for 1 second before the input area is blank and the next question get loaded.
Here is a visual of what I am doing:
In particular, this is the HTML code that generates the input text area below:
<form id="answers">
<input type="text" name="inputtext" id="answer" style="width: 100%; height: 30px;" placeholder="Enter your answer..." onkeyup="checkAnswer(this,event);" autofocus><br>
</form>
This is the JSON file which is saved as: questionsAndAnswersItalian.json
[{"q":"What is the word for 'where' in Italian?","a":"Dove"},
{"q":"What is the word for 'when' in Italian?","a":"Quando"},
{"q":"What is the word for 'why' in Italian?","a":"Perché"}]
This is the javascript code that I've written which isn't working:
var jsonUrl = "questionsAndAnswersItalian.json";
var qs;
var numCards;
var maxIndex;
function checkAnswer(input, event){
if(event.keyCode == 13){
var answer = document.getElementById("answer").value.toLowerCase();
var questionNumber = 0;
for(var i = 0; i<jsonUrl.length; i++){
if(answer == jsonUrl[questionNumber]["a"].toLowerCase()){
setTimeout(correct_input, 1000);
input.value = "";
}else{
setTimeout(incorrect_input, 1000);
input.value = "";
}
questionNumber++;
}
}
}
function correct_input(){
input.value = "Correct!";
}
function incorrect_input(){
input.value = "Incorrect!";
}
function init() {
$.getJSON(jsonUrl, function(jsonObject) {
qs = jsonObject;
numCards = qs.length;
maxIndex = numCards-1;
displayCard();
});
}
The functions aren't working as I expected them to and I was wondering if someone could tell me where I am going wrong.
If you need more information to understand what I'm doing here please do not hesitate to ask!
Any help or advice would be much appreciated!
Thank you.
In this part :
for(var i = 0; i<jsonUrl.length; i++){
if(answer == jsonUrl[questionNumber]["a"].toLowerCase()){
setTimeout(correct_input, 1000);
input.value = "";
}else{
setTimeout(incorrect_input, 1000);
input.value = "";
}
questionNumber++;
}
You are looping through a String (jsonUrl), not your jsonObject. Use qs instead.
EDIT:
Here's a jquery code that works :
$('#answer').keyup(function(event) {
var code = event.keyCode || event.which;
if (code == 13) {
var answer = $(this).val().toLowerCase();
var goodAnswer = qs[currentCard].a.toLowerCase();
if (answer == goodAnswer) {
setTimeout(correct_input, 1000);
}
else {
setTimeout(incorrect_input, 1000);
}
$(this).val('');
}
});
Declare var currentCard = null; as global and set its value in displayCard() where I suppose you do a random or something like that.
With this code you have to remove onkeyup="checkAnswer(this,event);".
jsfiddle: http://jsfiddle.net/u7bkH/
the setTimeout function requires an asynchronous callback.
EDIT a more complete example, but note that it's only showing the way to correctly use setTimeout per your requirements. You'll need to complete with the appropiate check of correctness of the answer.
So, change your code to this
$('#answer').keyup(function(event) {
var code = event.keyCode || event.which;
if (code == 13) {
var input = $(this);
var answer = input.val().toLowerCase();
if (answer == "correct") {
input.val("Correct!");
}
else {
input.val("Incorrect!");
}
setTimeout(
function(){
input.val("");
},1000);
}
});
I'm making a quiz with a text input. This is what I have so far:
<html>
<head>
<script type="text/javascript">
function check() {
var s1 = document.getElementsByName('s1');
if(s1 == 'ō') {
document.getElementById("as1").innerHTML = 'Correct';
} else {
document.getElementById("as1").innerHTML = 'Incorrect';
}
var s2 = document.getElementsByName('s2');
if(s2 == 's') {
document.getElementById("as2").innerHTML = 'Correct';
} else {
document.getElementById("as2").innerHTML = 'Incorrect';
}
//(...etc...)
var p3 = document.getElementsByName('p3');
if(p3 == 'nt') {
document.getElementById("ap3").innerHTML = 'Correct';
} else {
document.getElementById("ap3").innerHTML = 'Incorrect';
}
}
</script>
</head>
<body>
1st sing<input type="text" name="s1"> <div id="as1"><br>
2nd sing<input type="text" name="s2"> <div id="as2"><br>
<!-- ...etc... -->
3rd pl<input type="text" name="p3"> <div id="ap3"><br>
<button onclick='check()'>Check Answers</button>
</body>
</html>
Every time I check answers it always says Incorrect and only shows the first question. I also need a way to clear the text fields after I check the answers. One of the answers has a macro. Thanks in advance.
The method getElementsByName returns a NodeList, you can't really compare that against a string. If you have only one element with such name, you need to grab the first element from that list using such code instead:
var s1 = document.getElementsByName('s1')[0].value;
To make it more flexible and elegant plus avoid error when you have typo in a name, first add such function:
function SetStatus(sName, sCorrect, sPlaceholder) {
var elements = document.getElementsByName(sName);
if (elements.length == 1) {
var placeholder = document.getElementById(sPlaceholder);
if (placeholder) {
var value = elements[0].value;
placeholder.innerHTML = (value === sCorrect) ? "Correct" : "Incorrect";
} else {
//uncomment below line to show debug info
//alert("placeholder " + sPlaceholder+ " does not exist");
}
} else {
//uncomment below line to show debug info
//alert("element named " + sName + " does not exist or exists more than once");
}
}
Then your code will become:
SetStatus('s1', 'ō', 'as1');
SetStatus('s2', 's', 'as2');
//...
document.getElementsByName('s1') is an array you should use document.getElementsByName('s1')[0] to get certain element(first in this case)