Having this issue with trying to use addEventListener where the event I use does not read me clicking the button I have:
<input type="button" name="rps_button" id="rps_button" class="box_styled" value="Try Your Luck!">
<label for="rps_button"></label>
//The purpose of this JS file is for Rock Paper Scissors.
/*
1- Grab User input & store into variable userAnswer.
2- Get Computer input & store into variable compAnswer.
3- Switch case to compare both answers & give results.
Loop to check which one is checked
*/
var rps = document.getElementById("rps_button");
var rps_radio = document.querySelectorAll('input[name="rps"]');
var userAnswer = "";
var compAnswer = "";
rps.addEventListener('click', console.log("Clicked!"));
function init(e) {
uSer(userAnswer);
console.log(userAnswer);
}//[End] of Function
function uSer(userAnswer) {
console.log(rps_radio.value);
for (var i = 0; i < rps_radio.length; i++) {
if (rps_radio[i].checked) {
userAnswer = rps_radio[i];
}//[End] of if
}//[End] of Loop
console.log(userAnswer);
return userAnswer;
}//[End] of Function
What am I missing here with this Even issue?
You have implemented addEventListener incorrectly
This
rps.addEventListener('click', console.log("Clicked!"));
Should be this
rps.addEventListener('click', () => {
console.log("Clicked!");
});
you could also use a regular function instead of an arrow function
rps.addEventListener('click', function() {
console.log("Clicked!");
});
so basically your event was firing.. but the callback function wasnt implemented correctly, thus why you never got your console.log()
below is working example
const rps = document.getElementById("rps_button");
const rps_radio = document.querySelectorAll('input[name="rps"]');
let userAnswer = "";
let compAnswer = "";
rps.addEventListener('click', () => {
console.log('clicked');
});
function init(e) {
uSer(userAnswer);
console.log(userAnswer);
}
function uSer(userAnswer) {
console.log(rps_radio.value);
for (var i = 0; i < rps_radio.length; i++) {
if (rps_radio[i].checked) {
userAnswer = rps_radio[i];
}
}
console.log(userAnswer);
return userAnswer;
}
<input type="button" name="rps_button" id="rps_button" class="box_styled" value="Try Your Luck!">
<label for="rps_button"></label>
Related
<input type="button" name="name" value="Enero" id="mytext" onclick="my()">
function my() {
var poop = document.getElementById("mytext").value
if (poop = "Enero") {
poop = "Febrero"
} else if (poop = "Febrero") {
poop = "Marzo"
} else if (poop = "Marzo") {
poop = "Abril"
}
}
Hey I'm trying to make a function in an input button so that when you press click , the value of the button changes to different values depending of the clicks you give.
For example the default value is "Enero" (January in Spanish), so you click on in and its changes to "Febrero" consecutively until it returns to "Enero" and the cycle starts again.
(You can help me with a Jquery function or a Javascript function)
In javascript a single equals is an assignment, so you want to change all your if statements to ==or === instead like:
function my() {
var poop = document.getElementById("mytext").value
if (poop === "Enero") {
poop = "Febrero"
} else if (poop === "Febrero") {
poop = "Marzo"
} else if (poop === "Marzo") {
poop = "Abril"
}
}
Just fix the months spelling (idk Spanish so I guessed) and add the rest of them to the array..
function my() {
var poop = document.getElementById('poop');
var mnths = ['janurenao', 'februareano', 'marcheano', 'aprileona', 'may-eona'];
var index = mnths.indexOf(poop.value);
if (index > -1) {
index++;
if(index === mnths.length) index = 0;
poop.value = mnths[index];
}
}
<input value='janurenao' id='poop' />
<button onclick='my()'>pressme</button>
I am trying to take a user input value that is entered through an html input box, and have it as a value within my function (the negKeyword function in my code to be more specific). The problem that I think is happening is this input value is stored as a variable, so when the code is first stored in memory it is stored as "", since the user has not inputed anything yet. How do I get it so when the user inputs something it replaces blank or "" with what ever the user inputs?
What I basically want to happen next is the user will click a button, it will then compare what the user inputs to what the "negKeyword" function outputs and give a result on whether they match or not (this action is demonstrated in my booleanKeyword function in my code).
Here is my code.
var input = document.getElementById("input").value;
var arr = ['no', 'not', 'checked'];
var text = ''; //JS output variable.
var keyword = 'leak'; //Individual keyword.
function negKeyword() {
for (i = 0; i < arr.length; i++) {
if (text == input) { break; }
text = arr[i] + ' ' + keyword;
}
return text;
}
function booleanKeyword() {
if (input == negKeyword()) {
document.getElementById("result").style.color="green";
document.getElementById("result").innerHTML="Match";
} else {
document.getElementById("result").style.color="red";
document.getElementById("result").innerHTML="No Match";
}
}
document.getElementById("result2").innerHTML=keyword;
<label for="Full Negative Keyword">Negative Keyword</label> <input id="input" type="text" />
<div id="message">Result: <span id="result"></span></div>
<div id="message">Keyword: <span id="result2"></span></div>
<button id="test" onclick="booleanKeyword()">Click to Test</button>
You can retrieve the input's value again, by getting it and assigning to the same variable (but inside the function that is called after the button click).
var input = document.getElementById("input").value;
var arr = ['no', 'not', 'checked'];
var text = ''; //JS output variable.
var keyword = 'leak'; //Individual keyword.
function negKeyword() {
input = document.getElementById("input").value;
for (i = 0; i < arr.length; i++) {
if (text == input) { break; }
text = arr[i] + ' ' + keyword;
}
return text;
}
function booleanKeyword() {
input = document.getElementById("input").value;//The variable is reassigned, only after the click
if (input == negKeyword()) {
document.getElementById("result").style.color="green";
document.getElementById("result").innerHTML="Match";
} else {
document.getElementById("result").style.color="red";
document.getElementById("result").innerHTML="No Match";
}
}
document.getElementById("result2").innerHTML=keyword;
Edit: added the same code to negKeyword() function as it requires the input too.
It is not working because your variable input is always "". You have to assign new value to it each time the button is clicked. I just moved your code for input in BooleanKeyword() function. Now everything is working fine.
Everytime when something like this is not working, just try to log/alert values.
For example you could just alert(input + ' ' + negKeyword()); on top of booleanKeyword() function and you would see problem by yourself.
var input;
var arr = ['no', 'not', 'checked'];
var text = ''; //JS output variable.
var keyword = 'leak'; //Individual keyword.
function negKeyword() {
for (i = 0; i < arr.length; i++) {
if (text == input) { break; }
text = arr[i] + ' ' + keyword;
}
return text;
}
function booleanKeyword() {
input = document.getElementById("input").value;
if (input == negKeyword()) {
document.getElementById("result").style.color="green";
document.getElementById("result").innerHTML="Match";
} else {
document.getElementById("result").style.color="red";
document.getElementById("result").innerHTML="No Match";
}
}
document.getElementById("result2").innerHTML=keyword;
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<label for="Full Negative Keyword">Negative Keyword</label> <input id="input" type="text" />
<div id="message">Result: <span id="result"></span></div>
<div id="message">Keyword: <span id="result2"></span></div>
<button id="test" onclick="booleanKeyword()">Click to Test</button>
</html>
I have a problem with my Script. I want to do the following steps in this order:
1. Save the text in the input field.
2. Delete all text in the input field.
3. Reload the same text that was deleted before in the input field.
The problem with my script is that the ug()- function writes undefined in my textbox instead of the string that should be stored in var exput. The alert(exput) however shows me the correct content.
Help would be very much appreciated. And I'm sure there is better ways to do that, I'm quite new to this stuff.
HTML
<textarea id="a" style="width: 320px; height: 200px;"></textarea>
<input type="checkbox" id="remember" onclick="merker();deleter();ug()" />
Javascript
function merker() {
var merkzeug = document.getElementById('a').value;
ug(merkzeug);
};
function deleter() {
if(document.getElementById('remember').checked == true)
{
document.getElementById('a').value = "";
}
else {document.getElementById('a').value = "";
}
};
function ug(exput) {
alert(exput);
document.getElementById('a').value = exput;
};
Your code is calling merker(); deleter(); ug(); in the onclick event, but ug() is already called by merker(). You should be doing this instead:
function merker() {
var merkzeug = document.getElementById('a').value;
deleter();
ug(merkzeug);
};
function deleter() {
if(document.getElementById('remember').checked == true)
{
document.getElementById('a').value = "";
}
else {document.getElementById('a').value = "";
}
};
function ug(exput) {
alert(exput);
document.getElementById('a').value = exput;
};
<textarea id="a" style="width: 320px; height: 200px;"></textarea>
<input type="checkbox" id="remember" onclick="merker();" />
I changed Your Javascript:
function merker() {
merkzeug = document.getElementById('a').value;//global variable without var
ug();//why You use it here? I think only for test. So delete it after.
};
function deleter() {
if(document.getElementById('remember').checked == true)
{
document.getElementById('a').value = "";
}
else {document.getElementById('a').value = "";
}
};
function ug() {
alert(merkzeug);
document.getElementById('a').value =merkzeug;
};
Problems with your code:
method ug was used with argument and without argument ( i changed to without )
to restore deleted value it must be saved to some variable, i saved to global merkzeug variable - this is not good practice but sufficient in this case
next i used merkzeug to restore value in textarea in ug() function
i do not know why You using ug() two times? maybe delete one of them is good thing to do.
In plunker - https://plnkr.co/edit/fc6iJBL80KcNSpaBd0s9?p=info
problem is: you pass undefined variable in the last ug function:
you do: merker(value) -> ug(value); delete(); ug(/*nothing*/);
or you set your merkzeung variable global or it will never be re-inserted in your imput:
var merkzeug = null;
function merker() {
merkzeug = document.getElementById('a').value;
ug(merkzeug);
};
function deleter() {
if(document.getElementById('remember').checked == true)
{
document.getElementById('a').value = "";
}
else {document.getElementById('a').value = "";
}
};
function ug(exput) {
if (typeof exput === 'undefined') exput = merkzeung;
alert(exput);
document.getElementById('a').value = exput;
};
folks!
I've a litte problem, this is the situation:
Tree View
I let the tree on basis of the "lvl" create. That means, Bereich ABC is lvl1, Test1.docx is lvl4 and so on. So it's a "fake" Tree. But i have just this lvl information for every object.
I have to check the checkbox if the parent is clicked. that means, if lvl3 is clicked (for example "Originale") the lvl4 and lvl5 have to be checked also.
Do you understand what i mean? I hope so. But i can't make it working. Do you have any ideas?
$('[class^=lvl]').click(function(){
var keepChecking = true;
var currentElement = $(this);
var clickedLevel = getLevel(currentElement);
var checkValue = currentElement.is(':checked');
while (keepChecking) {
currentElement.attr('checked' , checkValue);
// get next element
currentElement = getNextCheckbox(currentElement);
var currentLevel = getLevel(currentElement);
keepChecking = (currentLevel > clickedLevel);
}
});
function getNextCheckbox(checkbox) {
return checkbox.parent().parent().next().children(":first").children(":first");
}
function getLevel(checkbox) {
var currentClass = checkbox.attr('class');
var currentLvl = currentClass.substring(3, currentClass.length);
return parseInt(currentLvl);
}
<TD class="center">
<INPUT TYPE="checkbox" NAME="" class="lvl[LL_REPTAG=PFADLEVEL /] docCheck" VALUE="[LL_REPTAG=DataId /]">
</TD>
I changed your javascript code to this:
function getNextCheckbox(checkbox) {
return checkbox.parent().parent().next().children(":first").children(":first");
}
function getLevel(checkbox) {
var currentClass = checkbox.attr('class');
if (currentClass){
var currentLvl = currentClass.substring(3, currentClass.length);
return parseInt(currentLvl);
}else{
return false;
}
}
$('[class^=lvl]').click(function(){
var currentElement = $(this);
var clickedLevel = getLevel(currentElement);
var checkValue = currentElement.is(':checked');
nextElement = getNextCheckbox(currentElement);
while ( getLevel(nextElement)>clickedLevel) {
currentElement=nextElement;
currentElement.prop('checked' , checkValue);
nextElement = getNextCheckbox(currentElement);
}
});
You can also play with it here: https://jsfiddle.net/1r73vy7z/1/
Enjoy :)
I have dynamic multiple check boxes which is used to restore multiple files. It works perfectly when I have more than 1 check boxes. Here is my php code for check boxes:
<form name="RestoreFile">
<input type="checkbox" title="'.$FldDoc['FldDocumentName'].'" name="restore_checkbox" value="'.$FldDoc['FldDocumentID'].'" id="restore_'.$NodeId.'_'.$FldDoc['FldDocumentID'].'"/>
<input type="button" value="Restore" onclick="RestoreDocFile(\''.$NodeId.'\',this.form.restore_checkbox);" />
</form>
And the definition of function RestoreDocFile() is given below:
function getSelected(opt)
{
var selected = new Array();
var index = 0;
for (var intLoop = 0; intLoop < opt.length; intLoop++) {
if (opt[intLoop].checked)
{
index = selected.length;
selected[index] = new Object;
selected[index].value = opt[intLoop].value;
selected[index].index = intLoop;
}
}
return selected;
}
function RestoreDocFile(nodeid, opt)
{
var getSelectDocIds = getSelected(opt);
//alert(nodeid+','+getSelectDocIds);
var strSelectedDocIds = "";
var i=0;
for (var item in getSelectDocIds)
{
if(i!=0)
{
strSelectedDocIds+=":";
}
strSelectedDocIds += getSelectDocIds[item].value ;
i++;
}
}
The problem is that if there has 1 checkbox at the time of form load it doesn't work properly.
Try replacing
onclick="RestoreDocFile(\''.$NodeId.'\',this.form.restore_checkbox);"
with
onclick="RestoreDocFile(\''.$NodeId.'\',this.form.getElementsByName(\'restore_checkbox\'));"
This will ensure you get a NodeList regardless of how many checkboxes there are.