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
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 .
<!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 .
One thing that will help you figure out what is going wrong is using the Chrome Developer Tools to see if any errors come up. Loading your page and clicking on the button displays these errors right of the bat:
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
After making that change, the code will run. When you click the button, you will see the counter value appearing:
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
