programko/jsbutton.html

61 lines
1.8 KiB
HTML
Raw Permalink Normal View History

2024-03-21 10:25:45 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" id="site" href="https://localhost/adlerka/responsive.css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.mim,js">
</script>
<script type="text/javascript"></script>
<script>
$(document).ready(function(){
$("hide").click(function(){
$("p").hide();
});
$("show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<h1>1</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">Click me to to display date and time</button>
<p id="demo"></p>
<h1>2</h1>
<p id="demo1">Javascript can change any type of html element.</p>
<script>
function myFunction() {
document.getElementById('demo1').style.fontSize = "25px";
document.getElementById('demo1').style.color = "red";
document.getElementById('demo1').style.backgroundColor = "yellow"
}
</script>
<button type="button" onclick="myFunction()">Click me</button>
<h1>3</h1>
<button id="hide">hide</button>
<button id="show">show</button>
<p>this is small content</p>
<p>another small paragraph</p>
<p>https://www.w3schools.com/jquery/</p>
<p>https://www.w3schools.com/html/html_scripts.asp/</p>
<h1>4</h1>
<img class="img1" src="https://hips.hearstapps.com/hmg-prod/images/dw-burnett-pcoty22-8260-1671143390.jpg?crop=0.668xw:1.00xh;0.184xw,0&resize=640:*"
style="width: 500px;"
@media screen and (max width="50em")*>
</html>