This question already has answers here:
How can I use goto in Javascript?
(16 answers)
Closed 8 years ago.
I'm programming a basic click counter for my site on a hidden Easter egg page when I encountered a problem I never had when programming web before: Does Javascript have an equivalent to other programming languages goto. The code is below, if anyone can make adjustments to it so that the displayed "clicks" are altered and do not remain at 0 while the variable itself if changed later in the code.
<html>
<body>
<h2>
<script>
var clicks = 0
</script>
<script>
document.write(clicks)
</script>
<br>
<button onclick ="clicks = clicks + 1">Click me</button>
</body>
</html>
What you want is to write and then repeatedly call a function. And you don't want that function to call document.write; you probably want it to append text to an existing DOM node.
I suggest picking up an introductory book on JavaScript.
Create the following html content:
<div id="myDiv"></div>
Also, after updating the clicks variable value, update the div content like this:
document.getElementById("myDiv").innerHTML = clicks;
Although I'm a novice at Javascript, I have experience with Python, Java and C++ and the only real GOTO alternative is a user defined function. In javascript, I believe it is just function functionname { code here }
No. Generally using goto statement is bad idea.
What you need to do is to write clciks to specific element each time when user clicks. Like this:
<html>
<body>
<h2>
<script>
var clicks = 0
</script>
<div id="myinfo"></div>
<br>
<button onclick="clicks = clicks + 1; document.getElementById('myinfo').innerHTML=clicks">Click me</button>
</body>
</html>
Also, you could use shorter command:
<button onclick="clicks = clicks + 1; myinfo.innerHTML=clicks">Click me</button>
Related
I'm new to coding. I'm trying to make a website to track my homework. I want it to show what I have to do. This is my code.
<p id="demo">To do now.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "do"'>Click Here!</button>
var do="5";
how do I get "To do now." to 5.
You can't have Javascript just floating in an HTML file, as your browser won't know what to do with it. All Javascript should either be enclosed by <script> tags or in an external file and referenced with a <link> tag.
Correct me if I'm wrong, but as I understand it, you want the "To do now." to change to 5.
If so then you don't need your do variable. You would just change your onclick attribute value as follows:
<button type="button" onclick='document.getElementById("demo").innerHTML = "5"'>Click Here!</button>
Alternatively, if you wanted to have the text to change to 5 using a Javascript variable, you would open a script tag and insert a function to do so like this:
<script type="text/javascript">
function changeText() {
var doo = 5;
document.getElementById('demo').innerHTML = doo;
}
</script>
<p id="demo">To do now.</p>
<button type="button" onclick="changeText()">Click Here!</button>
I'm not too sure why you want to do this but I gave you this option anyway incase you did.
As you can see, I changed the do variable that you used to doo as you can't use the first version as a variable name. This is due to the fact that we use do as a keyword for loops. Check out w3's page on do/while loops here.
If you say you're new to programming then I thoroughly recommend using w3 schools HTML, CSS, and Javascript tutorials as once completed, you should have a much better understanding about how Javascript interfaces with HTML.
do is a predefined word in JavaScript, so you cannot use it as a variable. try something else. you can try this
<p id="demo">To do now.</p>
<button type="button" onclick="var doit='5'; document.getElementById('demo').innerHTML = doit;">Click Here!</button>
I don't recommend declaring functions in the html structure. It is better to put the JavaScript logic in the file separately, as in my example.
var inner = '5';
document.querySelector('button').onclick = function() {
document.getElementById("demo").innerHTML = inner;
}
<p id="demo">To do now.</p>
<button type="button">Click Here!</button>
I'm a beginner with JavaScript and I have a problem with one task:
An HTML page contains an element who's id attribute is "number". The page calls the function countNelio(), which should retrieve the contents of the element, calculate its square (second power), and print this to the console in the form "The square of X is Y". Create this function. That HTML page loads your code, so you can refer to the HTML page in your code with the word document.
<body>
<p id="number">0</p>
<button id="button" onclick="countNelio()">Click here!</button>
</body>
In sample:
The square of chapter 12 is 144
Could someone help me? What kind of javascript code?
You need to define the function in a script tag in the html, like so:
<script>
function countNelio {
const value = document.getElementById("number").textContent
console.log(Math.pow(value, 2))
}
</script>
This question already has an answer here:
How do I pass the value of a variable to an specific page element with solely JavaScript?
(1 answer)
Closed 4 years ago.
Would something like this be possible?
<head>
<script>
var movie="Tag";
var link=("google.com/"+movie);
</script>
<a href=(link)>Click Me</a>
</head>
Please Help Me
HTML does not work like a templating language. To do something like this, the source would look a bit more like this:
<body>
Click Me
<script>
var movie = "Tag";
var link = "http://google.com/"+movie;
document.getElementById('some-random-id').setAttribute('href', link);
</script>
</body>
The difference is that we first created the HTML, and afterwards are using javascript to replace the link.
It's also possible to use Javascript to write all the HTML, but this is probably the easiest way to get started.
You can, but it takes a bit of coding.
In this case, you need to specify the full url, including the schema.
Then I gave the link an id attribute so that the JavaScipt code could find it and update the href with the new url.
const movie="Tag";
const url= "https://google.com/"+movie;
const link = document.getElementById("test-link");
link.href = url;
<a id="test-link" href="#">Click Me</a>
This question already has answers here:
Why this JSFiddle does not work [duplicate]
(1 answer)
jsFiddle: no connection between html and js? Can't call simple function from button? [duplicate]
(1 answer)
Closed 5 years ago.
ive used a basic example from w3schools.com to get here:
https://jsfiddle.net/02wu0v49/
function myFunction() {
var x = document.getElementById("fname").value;
document.getElementById("demo").innerHTML = "aaaaaa";
document.getElementById("fname").value = "bbbbb";
alert("lala3");
}
<body>
<p>A function is triggered when the user releases a key in the input field. The function outputs the actual key/letter that was released inside the text field.</p>
Enter your name: <input type="text" id="fname" onkeyup="myFunction()">
<p>My name is: <span id="demo"></span></p>
</body>
somehow the w3schools version works but it wont do anything on jsfiddle?
and it would be really nice to use [code][/code] or something to format code on stackoverflow...all those indents are terrible.
Change load type to No wrap in - <body>
Here is updated fiddle
Here is Docs
If you open the browser console in JS fiddle it lists the error. The HTML can't find the JS.
I am new coding, so please don't be mad at this simple question, But, I have a button that I want to change the text from the header and content with onclick. But, I have no idea how to do it.
I have a button in my page like this:
<button id="myButton" data-role="button">
And also have the function in java:
$("#myButton").click(function()){
}
So, if my header div has an id as "myHeader" and content id is "myContent", How can I make the callback function to modify the text?
if I got it your html should look like this:
<div id="myHeader"></div>
<div id="myContent"></div>
<button id="myButton" data-role="button">
'And also have the function in java:' you are not using java, this is javascript wich is really different from java.
so your script should look like this:
$("#myButton").click(function()){
$('#myHeader').html('hello World');
$('#myContent').html('hey let me say hello too!');
}
hope it helps!
#bto.rdz is correct but his jquery syntax is a bit off. The function has an extra parentheses that should be at the end instead with a semi-colon afterward.
$("#myButton").click(function(){
$('#myHeader').html('hello World');
$('#myContent').html('hey let me say hello too!');
});