So I am trying to create pop up logic for a simple find an object game. So I created a an array of strings that I want to display 2 alert messages. The first alert stating hey you found [insertName].Then if you click on the same object again it display a generic message "you already found this". Then after all images have been clicked, I have a new page loaded based of the int count of items clicked. What I'm having trouble with is how to execute that first initial alert. I was thinking I would create another array for the initial alerts,but that when i got stuck.
<div id="b1" class="mybox">One</div>
<div id="b2" class="mybox">Two </div>
<div id="b3" class="mybox">Three </div>
<div id="b4" class="mybox">Four </div>
<div id="b5" class="mybox">Effortless Calls </div>
<div id="b6" class="mybox">Voicebot </div>
<script type="text/javascript">
//$('body').css('background','blue');
var Boxes = [];
var ttle = $('.mybox').length;
$('.mybox').click(function () {
alert('Blah ');
var bx = this.id;
if (Boxes.indexOf(bx) >= 0){
alert('You Already Found Object ');
}else{
Boxes.push(bx);
}
if (Boxes.length ==ttle)
window.location = "#/finishedgame";
});
</script>
Add a custom attribute to the your elements data-clicked="false"
When the user clicks the element set elem.setAttribute('data-clicked','true');
<div id="b1" class="mybox" data-clicked="false">One</div>
<div id="b2" class="mybox" data-clicked="false">Two </div>
<div id="b3" class="mybox" data-clicked="false">Three </div>
<div id="b4" class="mybox" data-clicked="false">Four </div>
<div id="b5" class="mybox" data-clicked="false">Effortless Calls </div>
<div id="b6" class="mybox" data-clicked="false">Voicebot </div>
$('.mybox').click(function (elem) {
var clicked = $(elem).data('clicked');
if(clicked){
alert(msg1);
} else {
alert(msg1);
elem.setAttribute('data-clicked','true');
};
});
You don't need another array, before you do Boxes.push(bx); why don't you just do alert(hey you found [insertName]);? this should be the first time a user is touching a box aka when you want the first alert at least from what I gathered from your post. So
var Boxes = [];
var ttle = $('.mybox').length;
$('.mybox').click(function () {
var bx = this.id;
if (Boxes.indexOf(bx) >= 0){
alert('You Already Found Object ');
}else{
var text = [get name of box here]
alert("hey you found" + text);
Boxes.push(bx);
}
if (Boxes.length ==ttle)
window.location = "#/finishedgame";
});
Related
I am creating new rows using jquery and want to delete that row when delete button is pressed. Adding new row part is working fine and the problem is in delete part. When I click on delete button then nothing happens. It doesn't even show alert which is written in code. It seems to me like delete button is not even getting pressed.
How can I delete that particular record when delete button is pressed?
JSfiddle is given below
https://jsfiddle.net/ec2drjLo/
<div class="row">
<div>
Currency: <input type="text" id="currencyMain">
</div>
<div>
Amount: <input type="text" id="amountMain">
</div>
<div>
<button id="addAccount">Add Account</button>
</div>
</div>
<div id="transactionRow">
</div>
As you have added the elements as a string, they are not valid HTML elements and that's why you can't add an event listener. You can add the click event to the document body and capture the event target, like
$(document).on('click', function (e){
if(e.target.className === 'deleteClass'){
//process next steps
}
}
You can try the demo below, not sure if it's the result you need, but the delete button works. Hope it helps!
let accountCount = 0;
$("#addAccount").click(function (e)
{
accountCount++;
let mystring = "<label class=\"ok\" id=\"[ID]\">[value]</label>";
let deleteString = "<button class=\"deleteClass\" id=\"deleteAccount"+ accountCount +"\">Delete Account</button>";
let currency = mystring.replace("[ID]", "currency"+ accountCount).replace("[value]", $("#currencyMain").val());
let amount = mystring.replace("[ID]", "amount"+ accountCount).replace("[value]", $("#amountMain").val());
$("#transactionRow").append(currency);
$("#transactionRow").append(amount);
let div = document.createElement('div');
div.innerHTML =deleteString;
$("#transactionRow").append(div);
$("#currencyMain").val('');
$("#amountMain").val('')
});
$(document).on('click', function (e)
{
if(e.target.className === 'deleteClass'){
var content = $("#transactionRow").html();
var pos = content.lastIndexOf("<label class=\"ok");
if(pos > 5)
$("#transactionRow").html(content.substring(0,pos));
else
alert("You cannot delete this row as at least one Account must be present");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">
<div>
Currency: <input type="text" id="currencyMain">
</div>
<div>
Amount: <input type="text" id="amountMain">
</div>
<div>
<button id="addAccount">Add Account</button>
</div>
</div>
<div id="transactionRow" style="border: 1px solid grey">
</div>
I have 2 images displayed on a page. I want a message to appear when I click 1 image and it to disappear when I click the alternate one, then vice versa.
The jQuery code I created below seems to be working fine, but I am continuously getting an [object HTMLImageElement] message on the alternate image every time I click the one that is displaying the text.
$(document).ready(function(){
$("#gimp").click(function(){
var gimp = "Gimp message.";
var i = $("#qInkscape").text(inkscape);
if (i == true) {
$("#qInkscape").hide();
$("#qGimp").text(gimp);
} else {
$("#qGimp").text(gimp);
}
});
$("#inkscape").click(function(){
var inkscape = "Inkscape message";
var g = $("#qGimp").text(gimp);
if (g == true) {
$("#qGimp").hide();
$("#qInkscape").text(inkscape);
} else {
$("#qInkscape").text(inkscape);
}
});
});
And the html
<div class="mf-container">
<div class="mf-content">
<div class="row">
<div class="mf-third mf-center">
<img src="img/qualifications/gimp_g.png" class="mf-pic-unique mf-pic-
shadow mf-margin-top" id="gimp" alt="about gimp">
<p id="qGimp" class="mf-off-black-text"> </p>
</div>
<div class="mf-third mf-margin-top">
<p class="mf-center mf-off-black-text">Click on an image to learn more
about each technology</p>
</div>
<div class="mf-third mf-center">
<img src="img/qualifications/inkscape_G.png" class="mf-pic-unique mf-
pic-shadow mf-margin-top" id="inkscape" alt="about inkscape">
<p id="qInkscape" class="mf-off-black-text"> </p>
</div>
</div>
</div>
</div>
Managed to get the words to appear when a certain button is pressed thanks to you guys. Just need help with one more thing. I've tried using google, only found some ideas, but wasn't working well. This is just something simple.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article>
<!-- insert clickable box here -->
<p id="q1">Want to play a game?</p>
<br>
<button type="button" onclick="buttonYes1()" id="byes1">Yes</button>
<button type="button" onclick="buttonNo1()" id="bno1">No</button>
<script type="text/javascript">
function buttonYes1() {
document.getElementById("yes").style.display = "block";
}
// code to hide first question after yes button is pressed
var button = document.getElementById('byes1')
button.addEventListener('click', hideshow, false);
function byes1() {
document.getElementById('byes1').style.display = 'block';
this.style.display = 'none'
}
function buttonNo1() {
document.getElementById("no").style.display = "block";
}
</script>
<!-- if yes, show detailed message -->
<p id="yes" style="display: none;">random words</p>
<!-- if no, show thanks for playing -->
<p id="no" style="display: none;">no words</p>
<!-- if yes, followed by detailed message, insert question #2 here -->
<p id="q2">Qusetion number 2 goes here</p>
<button type="button" onclick="buttonYes2()">Yes</button>
<button type="button" onclick="buttonNo2()">No</button>
<script type="text/javascript">
function buttonYes2() {
document.getElementById("yes2").style.display = "block";
}
function buttonNo2() {
document.getElementById("no2").style.display = "block";
}
</script>
<!-- if yes to question #2, give instructions on what to do -->
<p id="yes2" style="display: none;">random words 2</p>
<!-- if no to question #2, order soda, game ends -->
<p id="no2" style="display: none;">no words 2</p>
</article>
So my question here is, how can I get the first question to disappear once the "yes" button is pressed? On top of that, I want to hide the second question until the user clicks on the "yes" button and that's when the question appears.
Is this what you are asking for? See the snippet below:
function buttonYes1() {
var Yes1 = document.getElementById("yes")
Yes1.style.display = "block";
var question1Div = document.getElementById("question1Div")
question1Div.style.display = "none";
var question2Div = document.getElementById("question2Div")
question2Div.style.display = "block";
}
// code to hide first question after yes button is pressed
var button = document.getElementById('byes1')
button.addEventListener('click',false);
function byes1() {
document.getElementById('byes1').style.display = 'block';
this.style.display = 'none'
}
function buttonNo1() {
document.getElementById("no").style.display = "block";
}
function buttonYes2() {
document.getElementById("yes2").style.display = "block";
}
function buttonNo2() {
document.getElementById("no2").style.display = "block";
}
<article>
<div id="question1Div">
<!-- insert clickable box here -->
<p id="q1">Want to play a game?</p>
<br>
<button type="button" onclick="buttonYes1()" id="byes1">Yes</button>
<button type="button" onclick="buttonNo1()" id="bno1">No</button>
</div>
<!-- if yes, show detailed message -->
<p id="yes" style="display: none;">random words</p>
<!-- if no, show thanks for playing -->
<p id="no" style="display: none;">no words</p>
<!-- if yes, followed by detailed message, insert question #2 here -->
<div id="question2Div" style="display:none;">
<p id="q2">Qeustion number 2 goes here</p>
<button type="button" onclick="buttonYes2()">Yes</button>
<button type="button" onclick="buttonNo2()">No</button>
</div>
<!-- if yes to question #2, give instructions on what to do -->
<p id="yes2" style="display: none;">random words 2</p>
<!-- if no to question #2, order soda, game ends -->
<p id="no2" style="display: none;">no words 2</p>
</article>
This is where you are going to have to put on your thinking cap as a programmer and start coming up with solutions. Here is one way of doing this:
var questionElements = document.getElementsByClassName('question');
var currentQuestion = 1;
function answerQuestion(answer){
//Handle the response
switch(answer) {
case 'Yes':
//Do something here
break;
case 'No':
//Do something else here
break;
default:
console.log('Oops, how did you get here?');
}
//Display or remove each question
[].forEach.call(questionElements, (qElement, index) => {
if (index == currentQuestion - 1) {
//Remove the answered question
qElement.style.display = 'None';
} else if (index == currentQuestion) {
//Display the next question
qElement.style.display = 'Block';
}
});
//Prepare for the next question
currentQuestion++;
if (currentQuestion == questionElements.length) {
//All finished, Do something
}
}
.question {
display: none;
}
.question:first-of-type {
display: block;
}
<div class="question">
<p>Question 1: Do you like eggs?</p>
</div>
<div class="question">
<p>Question 2: Do you like ham?</p>
</div>
<div class="question">
<p>Question 3: Do you like green eggs and ham?</p>
</div>
<button onclick="answerQuestion('Yes');">Yes</button>
<button onclick="answerQuestion('No');">No</button>
My view has a button and the view is looped.so it has raws.
when i click the button of a single raw i need to color that button.
so i added a onclick="select_Button(<?php echo $rawID?>)" to the raw's button in my view
select_Button is my funtion in js
function select_Button(rawNumberOfVote) {
var RawNumber = rawNumberOfVote;
alert ("Form submitted successfully" + RawNumber);
var upVote = document.getElementById("up_vote");
upVote.style.background = "green";
}
like above i send the rawID to the funtion.
how can i edit this line to accept the view called up_vote in that particular raw id that i got from parameter.
var upVote = document.getElementById("up_vote");
becuz if i only use this line it will color the first raw's button instead the one i wanted
Thank you
you can use data attribute in your html referencing to this page and this page. and retraive with this this jquery code snippet:
$("[data-test ='my value']")
or this code snnipet in javascript:
document.querySelectorAll(".example").find(function(dom){
return dom.dataset.test == "expected-value"
});
Update:
accourding to this page querySelectorAll return nodeList and NodeList are not array and we cannot use find method so I change my answer to this code:
<html>
<body>
<div class="post" data-key="1">
<lable>test</lable>
<button type="button" onclick="upvote(1)">up vote</button>
</div>
<div class="post" data-key="2">
<lable>test</lable>
<button type="button" onclick="upvote(2)">up vote</button>
</div>
<div class="post" data-key="3">
<lable>test</lable>
<button type="button" onclick="upvote(3)">up vote</button>
</div>
</body>
</html>
<script type="text/javascript">
var upvote = function(id) {
var nodes = document.querySelectorAll(".post");
console.log(nodes.length);
for(i = 0 ; i < nodes.length ; i++){
console.log(nodes[i].dataset.key);
if (nodes[i].dataset.key == id)
nodes[i].style.backgroundColor = "red";
}
};
</script>
I've been trying to get this to work and thought it would be relatively easy but i'm just unable to target my div's with javascript.
I want a list of boxes and each one will be clickable and each one has a buddy which is hidden. when you click a , it hides and shows its buddy which will have an input box. Type the text in you need and press ok and it changes back to it's original displaying the text you have entered.
the head contains the following:
<head>
<script language="javascript">
var state = 'none';
function showhide(layer_ref) {
if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
</script>
And then my HTML contains:
<div id="div0">
<a href="#" onclick="showhide('div1');" style="text-decoration:none;">
<div style="width:200px; height:30px; background-color:grey;color:white">
Input: <div id="showinput"></div>
</div>
</a>
</div>
<div id="div1" style="display:none;">
<div style="width:200px; height:30px; background-color:grey;color:white">
<input type="text id="addInput" /">
<input type="submit" value="submit" name="submit" onclick="showhide('div1');" />
</div>
</div>
I'm trying to add the following but it just won't update the original and the script just makes the buddy div show below the original. How can i hide the original at the same time?
var myobj = document.getElementById("addInput");
var mytext = myobj.value;
document.getElementById("showinput").innerHTML = mytext;
You are missing a closing quote around type="text so the input id is not set. Try:
<input type="text" id="addInput" />