# function countTmesClicked() ? Please help find my error.

**URL:** <https://forum.kirupa.com/t/function-counttmesclicked-please-help-find-my-error/639328>\
**Category:** Uncategorized\
**Created:** [January 26, 2019, 5:52pm UTC](https://forum.kirupa.com/t/function-counttmesclicked-please-help-find-my-error/639328 "2019-01-26T17:52:35Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [January 26, 2019, 5:52pm UTC](https://forum.kirupa.com/t/function-counttmesclicked-please-help-find-my-error/639328/1 "2019-01-26T17:52:35Z")

</div>

Hello & Thanks ;  
Trouble spots:

1. input type=“button” onclick=“countTmesClicked()” value=“countTmesClicked”
2. function countTmesClicked ()

```auto
<!DOCTYPE html>
<html lang="en">
<head>
<title>VM file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/Attributes.html </title>
		<style>
			body {
				margin:0;
				padding:0;
				font-family: Sans-Serif;
				line-height: 1.5em;
			}
</style>

</head>
<body onload= "loadGlobalConstants()" >
<p id="currentPage" align="center">Current Page</p>

<script> 
function loadGlobalConstants() {
    var LogArea = "LogArea";
    var p_tgh; 
    var document_URL;
    var button_Url ;
    var timesClicked = 0;
documentURL()
    }
</script>

<script>
function documentURL() {
  var document_URL = document.URL; 
  document.getElementById("currentPage").innerHTML = document_URL; 
// document.getElementById("LoadButtonLink").innerHTML = document_URL; 
// alert(button_Url);
}
</script>

<script>
function countTmesClicked() { 
alert(timesClicked);
if (timesClicked == 0) 
{
document.write(timesClicked);
 timesClicked = timesClicked+1;
}
if (timesClicked > 0) 
{
    timesClicked = timesClicked+1;  
document.write(timesClicked)
}
</script>
<div>    
    <img src="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/smallCartoonShark.png">
<!-- get current page address -->
</div>
      <div>
         <!-- Buttons Header createNewLink -->
         <button onclick="fiddleWithHasAttribute()">fiddleWithHasAttribute</button>
         <button onclick="fiddleWithGetAttribute()">fiddleWithGetAttribute</button>
         <button onclick="fiddleWithRemoveAttribute()">fiddleWithRemoveAttribute</button>
         <input type="button" onclick="documentURL()" value="Reload Page" />  
         <input type="button" onclick="countTmesClicked()" value="countTmesClicked" />  
      </div>

					<div class="innertube"> <!-- div.section.content.innertube.p -->
						<p contenteditable id="p_tgh">Text paragraph</p>
					</div>

</body>

<script id="js" >
const img = document.querySelector('img');
var var_hasAttribute ;

function fiddleWithHasAttribute() {

var_hasAttribute = img.getAttribute('src'); // returns "...shark.png"
alert(var_hasAttribute);
createTextArea();
}
</script>

<script id="js" >
var var_getAttribute ;

function fiddleWithGetAttribute() {

var_getAttribute = img.getAttribute('src'); // returns "...shark.png"
alert(var_getAttribute);
}
</script>

<script id="js" >
var var_removeAttribute ;

function fiddleWithRemoveAttribute() {

var_removeAttribute = img.removeAttribute('src'); // remove the src attribute and value
alert(var_removeAttribute);
}
</script>

	<script id="js" contenteditable >
function createTextArea() {
          p_tgh = document.createElement("p");
          p_tgh.innerHTML = TextParagraph;
          p_tgh.setAttribute("contenteditable", "true");
          var content = document.getElementById("content");
          content.appendChild(p_tgh);
        }﻿
</script>	
</html>

```

Also , I can’t get alert() to work in that function .  
Thanks for your help !

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 27, 2019, 12:36am UTC](https://forum.kirupa.com/t/function-counttmesclicked-please-help-find-my-error/639328/2 "2019-01-27T00:36:28Z")

</div>

You can use one script tag for all of your functions, so you shouldn’t have to use two to separate of them.

Also, declaring your variables inside the function makes them local to just that function. You want to declare them outside if you wish to use these variables outside of it. This tutorial will help you out better on understanding how scope works in JS: [https://www.kirupa.com/html5/variable\_scope\_js.htm](https://www.kirupa.com/html5/variable_scope_js.htm)

---

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [January 27, 2019, 2:17am UTC](https://forum.kirupa.com/t/function-counttmesclicked-please-help-find-my-error/639328/3 "2019-01-27T02:17:24Z")

</div>

Thank you for pointing out my scoping error  
and for the video .  
I corrected that error , but the function countTmesClicked() is still not working .  
So I’m thinking that there must be more errors in there .

```auto
<!DOCTYPE html>
<html lang="en">
<head>
<title>VM file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/Attributes.html </title>
		<style>
			body {
				margin:0;
				padding:0;
				font-family: Sans-Serif;
				line-height: 1.5em;
			}
</style>

</head>
<body onload= "loadGlobalConstants()" >
<p id="currentPage" align="center">Current Page</p>

<script> 
    var LogArea = "LogArea";
    var p_tgh; 
    var document_URL;
    var button_Url ;
    var timesClicked = 0;
function loadGlobalConstants() {
documentURL()
    }</script>

<script>
function documentURL() {
  var document_URL = document.URL; 
  document.getElementById("currentPage").innerHTML = document_URL; 
// document.getElementById("LoadButtonLink").innerHTML = document_URL; 
// alert(button_Url);
}
</script>

<script>
function countTmesClicked() { 
//alert(timesClicked);
if (timesClicked == 0) 
{
document.write(timesClicked);
 timesClicked = timesClicked+1;
}
if (timesClicked > 0) 
{
    timesClicked = timesClicked+1;  
document.write(timesClicked);
}
</script>
<div>    
    <img src="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/smallCartoonShark.png">
<!-- get current page address -->
</div>
      <div>
         <!-- Buttons Header createNewLink -->
         <button onclick="fiddleWithHasAttribute()">fiddleWithHasAttribute</button>
         <button onclick="fiddleWithGetAttribute()">fiddleWithGetAttribute</button>
         <button onclick="fiddleWithRemoveAttribute()">fiddleWithRemoveAttribute</button>
         <input type="button" onclick="documentURL()" value="Reload Page" />  
         <input type="button" onclick="countTmesClicked()" value="countTmesClicked" />  
      </div>

					<div class="innertube"> <!-- div.section.content.innertube.p -->
						<p contenteditable id="p_tgh">Text paragraph</p>
					</div>

</body>

<script class="js" >
const img = document.querySelector('img');
var var_hasAttribute ;

function fiddleWithHasAttribute() {

var_hasAttribute = img.getAttribute('src'); // returns "...shark.png"
alert(var_hasAttribute);
createTextArea();
}
</script>

<script class="js" >
var var_getAttribute ;

function fiddleWithGetAttribute() {

var_getAttribute = img.getAttribute('src'); // returns "...shark.png"
alert(var_getAttribute);
}
</script>

<script class="js" >
var var_removeAttribute ;

function fiddleWithRemoveAttribute() {

var_removeAttribute = img.removeAttribute('src'); // remove the src attribute and value
alert(var_removeAttribute);
}
</script>

	<script class="js" contenteditable >
function createTextArea() {
          p_tgh = document.createElement("p");
          p_tgh.innerHTML = TextParagraph;
          p_tgh.setAttribute("contenteditable", "true");
          var content = document.getElementById("content");
          content.appendChild(p_tgh);
        }﻿
</script>	
</html>

```

Thanks again for your help !  
Especially at this time of day , Saturday nite 8:16pm my time .

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 27, 2019, 4:10am UTC](https://forum.kirupa.com/t/function-counttmesclicked-please-help-find-my-error/639328/4 "2019-01-27T04:10:00Z")

</div>

One thing that will help you figure out what is going wrong is using the [Chrome Developer Tools](https://www.kirupa.com/html5/console.htm) to see if any errors come up. Loading your page and clicking on the button displays these errors right of the bat:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/5/5d0a3ca8f84f06024ee6fcbb9384ffe5dee6a5d9.png)

Once you fix them, you’ll still get an error stating that the countTimesClicked function can’t be found. That is because you have the code declared ahead of your HTML. For best results, always put your script tag (single one without a class=“js” value) towards the bottom of your page to ensure any HTML you need is loaded first. This tutorial goes into more detail on that: [Running Your JavaScript at the Right Time](https://www.kirupa.com/html5/running_your_code_at_the_right_time.htm)

After making that change, the code will run. When you click the button, you will see the counter value appearing:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/a/a489e702df8960f3b51eb3eb90182b77d1eaa6b8.jpeg)

Because you are using `document.write`, the entire page’s contents are replaced with your counter value. To have an element on your page display the new contents without requiring your entire page’s contents to be lost, this tutorial will help you out: [Modifying DOM Elements](https://www.kirupa.com/html5/modifying_dom_elements.htm)

Let us all know if this helps get you unblocked 🙂

Cheers,  
Kirupa
