I'm trying to make a text based idle game where multiple buttons are involved, and text around those.
Whenever I try to put text after the "Work" button it stops working, stops calling the callback on click.
I tried putting the text in a separate div, which didn't work, I also tried putting the button in its own div, which made things worse. The last thing I tried was putting the text written by the write functions (which made the formatting terrible) in a paragraph tag which somehow also didn't work.
I don't know what else to try. The only thing that doesn't seem to break it so far is putting other buttons after it.
I'm using a function to create buttons called createButton(), it takes in 3 arguments, the button text, the button ID, and the button callback, and to draw text I'm using a "custom" write function (details at bottom).
For the work button I'm passing in the work() function as the callback.
createButton function:
function createButton(text, id, callback){
// console.log(text + " " + id + " " + callback)
var button = document.createElement("button");
button.innerHTML = text; //create a button element
//var body = document.getElementsByTagName("body")[0];
gameDiv.appendChild(button); //set its parent to the game div
button.addEventListener ("click", callback); //add the callback as a listener
}
work function:
function work(){
money++;
//TODO: find better way of updating money counter
draw(); //redraw to update money counter
if(stage == 1){ //increment the current stage if needed (for pacing)
stage = 2;
setTimeout(function(){
buttonStage = 1;
createButton("Buy Box", "buyBox", buyBox);
}, 1000);
}
}
draw function:
function draw(){
clear(); //clear the screen
for(var i=0;i<stage;i++){
switch(i){
case 0:
writeln("Do this");
writeln(" |");
writeln(" |");
writeln("▼");
createButton("Work", "work", work); //recreating a button every second might be a problem, but i dont know how to get it to position properly otherwise
break;
case 1:
write("<div id=\"stage2\">");
writelnDiv("<br><br>Money: " + Math.round((money*100)/100), "stage2");
writelnDiv("", "stage2");
writelnDiv("Now do this", "stage2");
writelnDiv(" |", "stage2");
writelnDiv(" |", "stage2");
writelnDiv("▼", "stage2");
write("</div>")
if(buttonStage > 0){
createButton("Buy Box", "buyBox", buyBox);
}
break;
}
}
}
The write, writeDiv, writeln, and writelnDiv functions both just add the text to the div's innerHTML.
All code is here: https://js.do/Grimtin10/637778
The solution is probably simple, but I don't exactly know what I'm doing with javascript.
If any more info is needed to solve this I can provide it.
Alright, I figured out a solution.
Instead of using document.createElement I just created the button using HTML tags directly appending it to the div.
It's kind of an awful way of doing it, but it works.
Related
Right now i have four images which are being dynamically presented on html. This is done via an onload function. Basically when i click on of those wheels I would like the image to change for around one second then go back. But right now only one wheel changes colour which is quite annoying.
function setWheels() {
document.querySelector(".blue-wheel").innerHTML = "<img src='blue-dark.svg.svg' onclick='buttonEvent()'>";
document.querySelector(".red-wheel").innerHTML = "<img src='red-dark.svg.svg' onclick='buttonEvent()'>";
document.querySelector(".green-wheel").innerHTML = "<img src='green-dark.svg.svg'>";
document.querySelector(".yellow-wheel").innerHTML = "<img src='yellow-dark.svg.svg'>";
}
function buttonEvent() {
if (document.querySelector(".blue-wheel")) {
document.querySelector(".blue-wheel").innerHTML = "<img src='blue-light.svg.svg'>";
setTimeout(setWheels, 800);
}
else if (document.querySelector(".red-wheel")) {
document.querySelector(".red-wheel").innerHTML =<img src='red-light.svg.svg'>";
setTimeout(setWheels, 800);
}
}
I havnt added the other coloured wheels as i do predict that they will have the same effect. I do believe that the setTimeout may be one of the problems as I'm calling the setWheels function but the first if statement seems to be the only one that changes colour even when i click the other div.
Your if statements aren't checking anything useful. if(document.querySelector(".blue-wheel")) is only checking if that element is there, not if the image inside was clicked.
If you want to know which image was clicked, pass it in as a parameter to the function.
<img src='blue-dark.svg.svg' onclick='buttonEvent(this)'>
and in your javascript, just change the src for the image that was clicked and then set a timeout to change it back.
function buttonEvent(e) {
e.src = e.src.replace('dark', 'light');
setTimeout(() => {e.src = e.src.replace('light', 'dark')}, 800);
}
if you want to protect against fast clicking while the image is already highlighted (improve performance) you can add a return:
function buttonEvent(e) {
if (!e.src.includes('dark')) return;
e.src = e.src.replace('dark', 'light');
setTimeout(() => {e.src = e.src.replace('light', 'dark')}, 800);
}
You are missing a "
.innerHTML =<img src='red-light.svg.svg'>";
should be
.innerHTML = "<img src='red-light.svg.svg'>";
you can use a variable (let x=0) to count on what image are you on. then make function that will see what x = 0 so it will show the first image then add one to the x (like "x++")but before you show the image you need to remove the last one, so then you need to loop through the images (you can give the same class to the images) like ".forEach()" and in that function you can see if that image is on the page or is shown to the user then just remove it, then x =1 in that case just show the second image and so on. you can add "if" statement that will check "if x>=(image count)" when that happens then just "x=0" and it will reset
sorry about this might be weird question with weird title.
i have this function in Javascript:
function alfred(){
document.querySelector('.image-7-panel').classList.toggle('notactive');
document.querySelector('.image-8-panel').classList.toggle('notactive');
document.querySelector('.background').classList.toggle('alfred-background');
var text = document.getElementById("heroes");
if(text.innerHTML !== "Alfred"){
text.innerHTML = "Alfred";
} else {
text.innerHTML = "Heroes are back";
}
}
but I want that after this is running, it goes back to where it was before running. how can I put this running? This function runs on click and with the same click another one runs. The clearTimeout is not helping me here but can't find a normal solution for this.
Going to explain with the real example. When I click, shows an image and a name associated. I want that after I click, the image goes back to the one it was before clicking and also the nam
Instead of adding this handler on only "onclick" event, add this on "onmouseup" and "onmousedown" events
<div onmouseup="alfred()" onmousedown="alfred()">Example</div>
Adobe Animate CC, HTML5 Canvas.
I have a few buttons that I'm trying to set up dynamically - set the text on each one, set their colors, etc. One thing I can't seem to figure out is how to get these buttons to do stuff to themselves when moused-over or clicked.
In this block of code, I just want a button to change the text on itself when moused-over. What am I missing?
var frequency = 3;
stage.enableMouseOver(frequency);
function fl_MouseOverHandler(event) {
event.target.theTitle.text = "You moused-over me!"
}
for (a=0; a<11; a++) {
this.container["button"+a].theTitle.text = "Button Number "+ a;
this.container["button"+a].addEventListener("mouseover", fl_MouseOverHandler);
}
I don't know that the theTitle attribute is, and I guess this is wrong. Try:
event.target.textContent = 'You moused-over me!'
this refers in a listener to the object you're listening, so the button that has been hovered in this case. So you can just do this.innerText = 'whatever'
A js fiddle
Hope it helped
Matt
I am practicing JS doing a project and have run into issues (again).
Just upfront, to explain what i want.
I have the top level buttons with nation names, on click a pic will fade into a container just for that. It gets the pic from the first array on line 1.This all works very well. However...
When that container is visible, I want a click handler on the "next" button to the right. This handler is one function (line 29-42) which animates the second div(.containsNext) by changing opacity and rotate values.
This function also calls another function (next, this should change the target div background with pics from the new Array) and has an if else statement.
The if condition works as it is supposed to.
The else condition does not run, even if i take out the nested next() function.
I think the error (console doesn't return one) on the next function is the lines 15 and 16, I know those lines look "funny":-)
And the if statement in the wrapper function does not work either.
How to fix this? Please make sure to select France, Italy or Croatia buttons, or the next button will not respond at all (do not know why either).
One more question on the side, what would be an economical way to store the pics for all the nations arrays selected/triggered by the next button?
Also how to do implement the proper nations array to be selected based on the top button nation selection?
Thank you guys
function
var imgLenght = 3;
var currentImg = 1;
function next() {
var imgContainer = document.querySelector(".containsNext");
if(currentImg > 0)
{
imgContainer.style.background = "url(" + "im[currentImg-1]" + ")";
currentImg = currentImg - 1;
}
}
Link to the pen:
http://codepen.io/damianocel/pen/gPggLB
use correctly nested quotes:
imgContainer.style.background = 'url("' + im[currentImg-1] + '")';
I'm trying to have a stop watch stop when 5 divs have been clicked. Then i would like to insert this record time into a seperate div and display it to the person in question. The stop watch and clicking works fine but i can't seem to get the message to show.
$(".masterobject").click(function() {
$(this).addClass("clicked");
if ($(".masterobject").length == $(".clicked").length){
pause();
var myrecordtime = document.GetElementById("yourtime");
$("#success").show();
$("#success").text('Congratulations! Your score is' + myrecordtime)
}
});
the masterobject class are the clicked divs. The pause() var works fine and after that is a mess. What is the correct way make sure the if statement runs all of this? Thanks in advance.
full code with the stop watch at http://jsfiddle.net/8qmyg/306/
After experimenting some more i solved it by changing the variable.
$(".masterobject").click(function() {
$(this).addClass("clicked");
if ($(".masterobject").length == $(".clicked").length){
pause();
$("#success").show();
var recordtime = $("#yourtime").text();
$("#success").html("congratulations your time is" + recordtime)
}
full code http://jsfiddle.net/8qmyg/307/