Displaying javascript variable without clearing screen [duplicate] - javascript

This question already has answers here:
Document.write clears page
(6 answers)
Closed 8 years ago.
I am learning how to develop and I wanted to work on a simple "clicker" game using HTML5, CSS3, and JavaScript. I'm looking to practice creating something similar to Cookie Clicker. I have created three icons and they each serve a purpose. I would like to figure out how to display a modified variable on a portion of the screen without clearing the screen or having to resort to a window popup.
Here is the link to the project if anyone is interested in helping:
https://github.com/HandleThatError/Practice
The function in question is the displayPoints function in the master.js file. I currently have the following:
function displayPoints() {
confirm(numClicks);
}
This does what I want. It displays the correct number of clicks. If I click on the middle button twenty times and then click the "Display Points" button, it'll display the right number of points. However, it does it in a popup window. How can I display the number of points inside the browser without using a popup window?
I tried the following code:
function displayPoints() {
document.write(numClicks);
}
This code worked inside the browser but it cleared the screen of the icons, so it's not possible to keep generating points by clicking on the second button.
tl;dr - How can I update variables in real time, on the browser screen, without using a popup window and without clearing the screen? Any help would be much appreciated.

You can use an html element on the page and fill it with data such as:
<span id="numClicksResult"></span>
<script>document.getElementById('numClicksResult').innerHtml=10;</script>

This is an important concept that links HTML and JS:
You need an element to store what you're going to update. This is usually a div.
<div id="myDiv"></div>
Then, in your JS, you need a way of accessing the div.
document.getElementById("myDiv");
This gives you the element, but you need to update the element's value.
document.getElementById("myDiv").innerHTML;
So, you can access the value, but you need to update it whenever there's a click. When the user clicks, you do all of the work you need on your variable and then...
document.getElementById("myDiv").innerHTML = myVar;

Related

How do I click on a link that is 1000px down without the action taking me at the beginning of the page? [duplicate]

This question already has answers here:
How to prevent a click on a '#' link from jumping to top of page?
(24 answers)
Closed 7 months ago.
I'm currently working on a Cooking Recipe sharing website and there's a matter on my Likes/Dislikes system.
The matter is when I click on the link "LIKE👍" as you can see in this picture, the page don't stay on the same position, it directly taking me at the beginning of the page, if you have some JS code to share with me in the purpose to solve my problem, please share.
I hope you understand my point, this matter can be resolved in JS but, I'm not a JS developer
it is complicated to solve the problem when you don't provide any code example.
However, this can be triggered from an anchor: ">
which moves you to the element having id="".
Or check the event function when you click on the like button.

How to write a script to detect active buttons on a website?

I am trying to find out a way to write an external script that will run on my computer and preform a specific action. The script needs to access my google chrome, a specific tab, and check the code of the website for a button property change. Ones the button's property changes i want the script to press the button. I am sure that the detection itself is easy, I'm just not sure how to write an external scrip that will access Chrome.
If you want an outside code to do things for you (read, automate), and you are trying to do it on a website, I suggest looking into Selenium.
After reading the comments i came to the conclusion you just want your button to be clicked when it hits 0 (which it seems you have already done) if that is the case: (sorry if read it wrong question is not very clear)
you can use 2 different ways one is
javascript
var l = document.getElementById('your-button-id');
l.click();
another is using the trigger functionality with jQuery
$(document).ready(function(){
$("yourbuttonid").trigger("click");
});

Web page element responsive to currently shown section [duplicate]

This question already has answers here:
How to change css for active link based on the hashtag
(2 answers)
Closed 8 years ago.
I'm dividing my web page in several sections (let's say section1, section2, etc.) so I can access to them from the main menu, using the corresponding href="#section1", href="#section2", etc.
This menu is actually a "floating menu", meaning that it's always shown at the top, even when you scroll down on the page. I'd like to make the menu's buttons responsive to the section that is being shown at each moment. For example, if I'm looking at "section2", I'd like the "section2" button to be coloured in a different way, or with bold letter...
I guees this is not really difficult, but it seems to me really hard to find about it.
Any clue?
Thanks in advance!
If You are using Bootstrap library.
It in build provides the option for selection of the button.
Plain HTML if you have used then you can use Javascript or JQuery library for button to be Selected with differnt CSS.
http://api.jquery.com/button-selector/
Button API can be used to select the button and change the CSS for the same.

Saving information of a control in javascript app data

I'll try and ask this as accurate as possible as I don't exactly understand my assignment.
Basically we had to create 3 HTML controls or JS controls and for each control we had to add an event handler that'd read something from a control and show it in a DIV.
Now my question is, how can I save the information shown in that DIV. I really don't understand how to do this. To be more specific, when I close the Build and re-open it after typing something in a textbox that would for example then give me the info from the textbox in a DIV, i'd want to see the same information I typed earlier in the Div again.
Thanks in advance!

Modeless Javascript Prompt

How can I create a javascript prompt that floats in a fixed position on a page?
More specifically I am trying to create a floating prompt or dialog box that asks for a user ID and creates a cookie with that id number. It can't be accomplished with a simple javascript prompt because the user needs to be answer the prompt at will and still be able to access the parent window (ie modeless). Also, it must be accomplished by simply including a script (no html or divs) because it will be given to several clients and we want to keep it as simple for them as possible to implement.
This would require asynchronous javascript, correct? How would I go about creating this?

Categories