I am newbie in frontEnd part.
When I have included their frontend into our test it just won't work.
They are the company that we are building the backend for.
This is their:
This is ours:
This is their code:
<head><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<style type="text/css">.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}
</style><style type="text/css">#media print { .gm-style .gmnoprint, .gmnoprint { display:none }}#media screen { .gm-style .gmnoscreen, .gmnoscreen { display:none }}</style><style type="text/css">.gm-style-pbc{transition:opacity ease-in-out;background-color:rgba(0,0,0,0.45);text-align:center}.gm-style-pbt{font-size:22px;color:white;font-family:Roboto,Arial,sans-serif;position:relative;margin:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ICLEI</title>
<link rel="stylesheet" href="css/main.css">
<link href="https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cairo:400,200,300,600,700,900" rel="stylesheet" type="text/css">
<script type="text/javascript" style="">window.jQuery || document.write('<script src="js/jquery-1.11.2.min.js"><\/script>')</script><script src="js/jquery-1.11.2.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3" defer=""></script>
<script type="text/javascript" src="js/jquery.main.js" defer=""></script>
<style type="text/css">.js-slide-hidden{position:absolute !important;left:-9999px !important;top:-9999px !important;display:block !important}</style><style></style><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/common.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/map.js"></script><style type="text/css">.fancybox-margin{margin-right:15px;}</style>
<style type="text/css">.gm-style {
font: 400 11px Roboto, Arial, sans-serif;
text-decoration: none;
}
.gm-style img { max-width: none; }</style>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/util.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/onion.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/controls.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/stats.js"></script>
</head>
This is our code:
<head><link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"><style type="text/css">.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}
</style><style type="text/css">#media print { .gm-style .gmnoprint, .gmnoprint { display:none }}#media screen { .gm-style .gmnoscreen, .gmnoscreen { display:none }}</style><style type="text/css">.gm-style-pbc{transition:opacity ease-in-out;background-color:rgba(0,0,0,0.45);text-align:center}.gm-style-pbt{font-size:22px;color:white;font-family:Roboto,Arial,sans-serif;position:relative;margin:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<style type="text/css">.gm-style .gm-style-cc span,.gm-style .gm-style-cc a,.gm-style .gm-style-mtc div{font-size:10px}</style>
<style type="text/css">#media print { .gm-style .gmnoprint, .gmnoprint { display:none }}#media screen { .gm-style .gmnoscreen, .gmnoscreen { display:none }}</style>
<style type="text/css">.gm-style-pbc{transition:opacity ease-in-out;background-color:rgba(0,0,0,0.45);text-align:center}.gm-style-pbt{font-size:22px;color:white;font-family:Roboto,Arial,sans-serif;position:relative;margin:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ICLEI</title>
<link rel="stylesheet" href="/css/main.css">
<link href="https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cairo:400,200,300,600,700,900" rel="stylesheet" type="text/css">
<script type="text/javascript" style="">window.jQuery || document.write('<script src="/js/jquery-1.11.2.min.js"><\/script>')</script><script src="/js/jquery-1.11.2.min.js"></script>
<script src="/js/jquery-1.11.2.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3" defer=""></script>
<script type="text/javascript" src="/js/jquery.main.js"></script><style type="text/css">.js-slide-hidden{position:absolute !important;left:-9999px !important;top:-9999px !important;display:block !important}</style>
<style type="text/css">.js-slide-hidden{position:absolute !important;left:-9999px !important;top:-9999px !important;display:block !important}</style><style></style><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/common.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/map.js"></script><style type="text/css">.fancybox-margin{margin-right:15px;}</style><style
type="text/css">.gm-style {
font: 400 11px Roboto, Arial, sans-serif;
text-decoration: none;
}
.gm-style img { max-width: none; }</style>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/util.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/onion.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/overlay.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/controls.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/stats.js"></script>
<style></style><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/common.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/map.js"></script><style type="text/css">.gm-style {
font: 400 11px Roboto, Arial, sans-serif;
text-decoration: none;
}
.gm-style img { max-width: none; }</style><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/util.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/onion.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/controls.js"></script><script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps-api-v3/api/js/29/14b/intl/sr_ALL/stats.js"></script></head>
I have already checked couple of times and it seems to me like those two are exactly the same header.
The only difference that I can find is that some event happen on their site and it isn't happening on our site and I can't see why.
And it is happening on class called locations-list.
This is theirs code:
And this is ours:
Could someone help me with this ?
What am I doing wrongly ?
Edited:
This what I get from the network tab inside inspector:
It seems like you are missing a js script, the "ev" next to class="location-list" means there is js event listening this node. This script "js/jquery.main.js" is not called from cdn like the others, make sure it has the right path on the server and if you do maybe be there is another script being called in the footer
Related
I'm working with fullPage.js and I wanted to make some text sit around the top. I expected margin-right and margin-top to work and I even tried vertical-align. They didn't work.
Here is my code.
.s1a {
background: url(/https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg);
background-size: cover;
}
.s1a h1 {
text-align: left;
margin-left: 2em;
vertical-align: top;
font-size: 4rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="fullPage">
<div class="section s1a">
<h1>At **Removed**, we truly believe that</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new fullpage('#fullPage', {
autoScrolling: true
})
</script>
</body>
</html>
try
position: absolute;
left: x%;
top: y%;
where x and y are % from left and top
Floating the text to left may be helpful in this case.
*{
margin=0;
padding=0;
}
#fullPage {
background: url('https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg');
background-size: cover;
}
#fullPage h1 {
float : left;
font-size: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="fullPage">
<h1>At **Removed**, we truly believe that</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new fullpage('#fullPage', {
autoScrolling: true
})
</script>
</body>
</html>
#Make element position absolute with top and left value#
.s1a {
background: url(/https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg);
background-size: cover;
}
.s1a h1 {
position: absolute;
top: 0;
left: 0;
font-size: 4rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="fullPage">
<div class="section s1a">
<h1>At **Removed**, we truly believe that</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new fullpage('#fullPage', {
autoScrolling: true
})
</script>
</body>
</html>
I have linked my HTML to jquery but when I run it in Microsoft edge, it outputs
"Help.js:1 Uncaught ReferenceError: $ is not defined
at Help.js:1
(anonymous) # Help.js:
Code:
$(document).ready(function(){
$(".navBar").hover(function(){
$(this).css("border","2px solid black")
})
})
navBar{
display: flex;
position: sticky;
top:0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title{
color: black;
font-family: monospace;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>A Random Website</title>
</head>
<body>
<script src="style.js"></script>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<div class="navBar">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
</body>
</html>
It is because you're using $ before jQuery has loaded.
// Instead of:
//...
<script src="style.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
//...
// Use this:
// ...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="style.js"></script>
// ...
And move those script tags to the line before the closing </body> tag. i.e:
// ...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="style.js"></script>
</body>
</html>
Add scripts in your head tag and first load jquery and then your custom style.js file.
Also, add the defer attribute to your script.
Defer attribute when present, specifies that the script is executed when the page has finished parsing. You can read more about defer
$(document).ready(function() {
$(".navBar").hover(function() {
$(this).css("border", "2px solid black")
})
})
.navBar {
display: flex;
position: sticky;
top: 0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title {
color: black;
font-family: monospace;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>A Random Website</title>
<script src="https://code.jquery.com/jquery-latest.js" defer></script>
<script src="style.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navBar">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
</body>
</html>
I am trying to animate my school webpage with a revealing animation, but things aren't working out how it should be, like me trying to invoke in the anime.js library, I downloaded the file into my workspace, but it still isn't working out how it should be, here is the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test animation</title>
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
<script src="libs/anime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-animation">
Welcome to our School Enterprising Group website!
</div>
</body>
</html>
CSS Code:
body {
margin: 0px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: green;
}
.text-animation {
color: lightblue;
font-size: 50px;
font-family: "Passion One", sans-serif;
letter-spacing: 1px;
}
.text-animation, .letter {
display: inline-block;
}
And finally the JavaScript Code
var element = document.getElementsByClassName("text-animation")[0];
//Replace each char with <span class="letter">{char} </span>
element.innerHTML = element.textContent.replace(/\S/g, '<span class="letter">$&</span>');
anime.timeline({loop: true})
.add({
targets: ".text-animation .letter",
scale: [3,1],
opacity: [0,1],
translateZ: 0,
duration: 1000,
easing: "easeOutExpo",
delay: (elem, index) => index*70,
})
.add({
targets: ".text-animation",
opacity: 0,
duration: 1000,
easing: "easeOutExpo"
})
Tried everything I could do but still not working, PLEASE HELP!!!
Add the scripts inside the body tag like this and see if it works.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="text-animation">
Welcome to our School Enterprising Group website!
</div>
<script src="index.js"></script>
<script src="libs/anime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
Just delete your current HTML file and copy-paste the given code below. It will work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Test-Animation</title>
</head>
<body>
<div class="text-animation">
Welcome to our School Enterprising Group wesite!
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="index.js"></script>
</html>
My CSS file isn't loading in my header.php. I'm using the CDN approach to get bootstrap.
I'm sure about my href path.
Thanks for helping.
<html lang="en">
<head>
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/style.css">
</head>
<body>
<div class ="top-bar">
</div>
</body>
</html>
And this is my style.css file
.top-bar{
width: 100%;
height: 40px;
background-color: #2c3e50;
border-bottom: 2px solid #2c3e50;
}
my files structure
Did you try prepending / to the CSS path?
Like:
<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">
So basically like i'm trying to make text appear using buttons but I did everything, I tried changing the id a few times like myFunction() or myButton() but none work. I believe the id has nothing to do with this and repl.it is stupid. If it does work please help me please ok
I've tried using different ids as said before, I tried putting ;s and no ;s and I even tried asking supercommunity but no one answered.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>sunny's website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.button {
color:white;
background-color:green;
padding:10px 10px;
cursor: pointer;
}
.button:hover {
background-color: black;
}
.button:active {
cursor: help;
}
</style>
</head>
<body>
<script src="script.js"></script>
<h1>welcome<h1>
<button onclick="dingwun()" class="button">click me!</button>
<h2>click the thing to reveal!:</h2>
<p id="vari"></p>
<script>
function dingwun() {
var x = document:getElementById("vari");
x.innerHTML = "coolio";
}
</script>
</body>
</html>
You have a typo:
document:getElementById("vari");
Should be:
document.getElementById("vari");
NOTES:
Don't use .innerHTML when the string doesn't contain any HTML as .innerHTML has performance and security implications. Instead, use .textContent.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>sunny's website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.button {
color:white;
background-color:green;
padding:10px 10px;
cursor: pointer;
}
.button:hover {
background-color: black;
}
.button:active {
cursor: help;
}
</style>
</head>
<body>
<script src="script.js"></script>
<h1>welcome<h1>
<button onclick="dingwun()" class="button">click me!</button>
<h2>click the thing to reveal!:</h2>
<p id="vari"></p>
<script>
function dingwun() {
var x = document.getElementById("vari");
x.textContent = "coolio";
}
</script>
</body>
</html>
There was a typo in command document:getElementById("vari"), it should be a fullstop at the place of semicolon. document.getElementById("vari")
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>sunny's website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.button {
color:white;
background-color:green;
padding:10px 10px;
cursor: pointer;
}
.button:hover {
background-color: black;
}
.button:active {
cursor: help;
}
</style>
</head>
<body>
<script src="script.js"></script>
<h1>welcome<h1>
<button onclick="dingwun()" class="button">click me!</button>
<h2>click the thing to reveal!:</h2>
<p id="vari"></p>
<script>
function dingwun() {
var x = document.getElementById("vari");
x.innerHTML = "coolio";
}
</script>
</body>
</html>
You actually use : in document:getElementById("vari") you have to use . like document.getElementById("vari"). Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>sunny's website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
.button {
color:white;
background-color:green;
padding:10px 10px;
cursor: pointer;
}
.button:hover {
background-color: black;
}
.button:active {
cursor: help;
}
</style>
</head>
<body>
<script src="script.js"></script>
<h1>welcome<h1>
<button onclick="dingwun()" class="button">click me!</button>
<h2>click the thing to reveal!:</h2>
<p id="vari"></p>
<script>
function dingwun() {
var x = document.getElementById("vari");
x.innerHTML = "coolio";
}
</script>
</body>
</html>