0

I am trying to accomplish the following and I don't know why I am struggling. Create a new fiddle that contains a button with the text "x2" and the number 1 like this:

1 x2

Use Javascript to make it so that each time the button is clicked, the number above the x2 button will double. Send me the link to the fiddle.

Here is what I have thus far. I know I am targeting the button via JS but I cannot figure out how to return the updated value when the x2 button is clicked. 

<p id="counter">1</p>
<button onclick="calc()">x2</button>
<script>
function calc() {
    var element = document.getElementById("counter") *2;
    return counter.innerHTML = element;
}
</script>
Improve this question

5 Answers 5

Reset to default
4

Look at what this code is doing:

var element = document.getElementById("counter") *2;

You are multiplying an element by two, you are NOT reading the text.

You want to use innerHTML or textContent. That returns a string, so you want to use parseInt() or parseFloat().

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you for the reply! Why does this only work on jsfiddle when I include the JS in my HTML file using the <script> tags? When I add the code to the JavaScript module, the code does not work. jsfiddle.net/cbadrew00/8z1prepf/#update
1

Don't return, nothing will read your return. Put it back into counter element. Also, document.getElementById("counter") *2 will give you NaN, since you are multiplying an Element object by a number; you need to work on .textContent value, which is a string (and will be automatically converted to a number when done arithmetics to).

Improve this answer

2 Comments

Thank you for the reply! Why does this only work on jsfiddle when I include the JS in my HTML file using the <script> tags? When I add the code to the JavaScript module, the code does not work. jsfiddle.net/cbadrew00/8z1prepf/#update
The reason is the fact that normally JavaScript is put into the <head> tag. Because JavaScript is executed as soon as it is found, at the time when it is run your counter does not exist yet. You can avoid the issue by putting the javascript below the button (as you presumably did), or having it attached to the load event (see examples here ).
1

This is what you will need to do:

The calc() function needs to address the innerHTML of the element that changes. Then a multiplication of the same innerHTML needs to be assigned to that, but it needs to be converted to a number first. There’s nothing else—no return statement or anything.

This snippet contains the code to do it (hidden, because spoiler, although it’s too late anyways):

function calc(){
  document.getElementById('counter').innerHTML=Number(document.getElementById('counter').innerHTML)*2;
}
<p id="counter">1</p>
<button onclick="calc()">x2</button>

Improve this answer

7 Comments

It is good form to avoid giving straight-out answers to people who are obviously doing homework, as it is promoting academic dishonesty. Instead, try to explain what they are doing wrong, so they can learn from it and do the exercise themselves.
Thank you for the reply! Why does this only work on jsfiddle when I include the JS in my HTML file using the <script> tags? When I add the code to the JavaScript module, the code does not work. jsfiddle.net/cbadrew00/8z1prepf/#update
And yes, I am doing homework, but I am also trying to get an understanding of the syntax. I NEED to learn this stuff
Your syntax is fine. If there was something that was off in your syntax, we would have mentioned it.
@DrewTuzson Hm… if you look at the JavaScript console in your browser it says that calc wasn’t defined. You can fix this by selecting the “No wrap—in <head>” option in JSFiddle on the left and putting the JS into the JS field. Basically like this.
|
0

Try this:

function calc() {
    var newvalue = parseInt(document.getElementById("counter").innerHTML) * 2;
    alert(newvalue);
}
Improve this answer

4 Comments

Thank you for the reply! Why does this only work on jsfiddle when I include the JS in my HTML file using the <script> tags? When I add the code to the JavaScript module, the code does not work. jsfiddle.net/cbadrew00/8z1prepf/#update
It works in jsfiddle: jsfiddle.net/8z1prepf/4 BUT you have to select 'No wrap' in the select box on the corner top left. Because, you need to manipulate the DOM : document.getElementById("counter") AND the function calc must be declared in the global scope.
so the no wrap option allows me to declare global scope? I am sorry for the noob questions. I have been neglecting js for far too long and I really need to start learning this
To understand why it doesn't works look to the jsfiddle generated source code ! :) (Inspect the result with F12) And try your code with no wrap and with onLoad. Search for your calc() function and you will understand.
0

innerHTML actually returns string rather than number, so to convert it into number we need to call parseInt():

<p id="counter">1</p>
<button onclick="calc()">x2</button>
<script>
   function calc() {
      var element = parseInt(document.getElementById("counter").innerHTML) * 2;
   return counter.innerHTML = element;
}

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.