Adding an onclick event to a div element - javascript

I saw a few similar topics which did help but I have specific problem and didn't manage to solve it alone so if anyone can help out I would appreciate it
I want to add onclick event to a div element.
HTML:
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')"></div>
JavaScript:
function klikaj(i)
{
document.getElementById(i).style.visibility='visible';
}
Wanted result: div with id="rad1" (which is hidden) turns visible, when clicked on div with id="thumb0".
This works when I add it to a button element but don't know how it goes with div elements.

I'm not sure what the problem is; running the below works as expected:
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">knock knock</div>
​<div id="rad1" style="visibility: hidden">hello world</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<script>
function klikaj(i) {
document.getElementById(i).style.visibility='visible';
}
</script>
See also: http://jsfiddle.net/5tD4P/

maybe your script tab has some problem.
if you set type, must type="application/javascript".
<!DOCTYPE html>
<html>
<head>
<title>
Hello
</title>
</head>
<body>
<div onclick="showMsg('Hello')">
Click me show message
</div>
<script type="application/javascript">
function showMsg(item) {
alert(item);
}
</script>
</body>
</html>

Depends in how you are hiding your div, diplay=none is different of visibility=hidden and the opacity=0
Visibility then use ...style.visibility='visible'
Display then use ...style.display='block' (or others depends how
you setup ur css, inline, inline-block, flex...)
Opacity then use ...style.opacity='1';

Its possible, we can specify onclick event in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="thumb0" class="thumbs" onclick="fun1('rad1')" style="height:250px; width:100%; background-color:yellow;";></div>
<div id="rad1" style="height:250px; width:100%;background-color:red;" onclick="fun2('thumb0')">hello world</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
<script>
function fun1(i) {
document.getElementById(i).style.visibility='hidden';
}
function fun2(i) {
document.getElementById(i).style.visibility='hidden';
}
</script>
</body>
</html>

I think You are using //--style="display:none"--// for hiding the div.
Use this code:
<script>
function klikaj(i) {
document.getElementById(i).style.display = 'block';
}
</script>
<div id="thumb0" class="thumbs" onclick="klikaj('rad1')">Click Me..!</div>
<div id="rad1" class="thumbs" style="display:none">Helloooooo</div>

Related

How do I create an alert that is dependent on the progress of my animation

So hi guys, this one has had me scratching my head for sometime now, so I wanna create an alert that will only popup when the progress of the transition gets to a certain point (ie when width gets to 3rem). Any help on this will be greatly appreciated
<!DOCTYPE HTML>
<html>
<head>
<title>converting html elements to numbers</title>
<meta charset="utf-8"/>
<style type="text/css">
.child11{background:blue;}
.transipion{
width:20px;
height:10vh;}
.cover{background:red;
width:100vw;
transition:10s all ease-in;}
</style>
</head>
<body>
<div class="child11">increaseByOne</div>
<div class="score" id="score">
score:<span>0</span>
<div class="cover"><div class="transipion"></div></div>
</div>
<script>
var rec1=document.querySelector(".child11");
var color=document.querySelector("#color");
var score=document.querySelector("span");
var vover=document.querySelector(".cover");
function funki(){
var integer=score.textContent;
var add=Number(score.textContent);
score.innerText=add + 1;}
This right here below 👇 is the js code I've tried
if(vover.style.width="50vw"){
alert("3rem");}
rec1.addEventListener("click", funki);
</script>
</body>
</html>
I also tried replacing the width there with transition=5s something like that but the alert always pops up before anything else. Oh and I don't wanna do this with setInterval.

onclick=function() not being called on text element [duplicate]

This question already has answers here:
onclick calling hide-div function not working
(3 answers)
Closed 1 year ago.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="overdiv">
<style>
.cross{
cursor:Default;
}
</style>
<script>
function close(){
alert("why don't you work");
}
</script>
<div id="lowerDiv">
<a class="cross" onclick=close()>x</a>
</div>
</div>
</body>
</html>
I can not understand why the x's onclick doesnt work, even if i surround the x with a div...
Any way i can fix or any other way i should be doing this? I want to close a window by pressing the x, I know how to do that but i just cant get the onclick to work... any help is appreciated.
https://stackoverflow.com/users/479156/ivar
Ivar let me know that the problem was naming the function "close()",
so i just had to name it a little different.
as explained here: onclick calling hide-div function not working
thank you Ivar!
<a class="cross" onclick=close()>x</a>
This code has a problem with onclick function. You didn't specified the function. You need the make the function code between "" tags.
Please change the code like this:
<a class="cross" onclick="close()">x</a>
I maid improvments to your code and it start to work
add "" to function in your tag onclick="onClose()",
you better add <script> in <header> but not in <body>
you can not called your function close() as it is reserved name. For example you also could not name var return etc
<!DOCTYPE html>
<html>
<head>
<script>
function onClose() {
console.log("why don't you work - I work");
}
</script>
<style>
.cross {
cursor: Default;
}
</style>
</head>
<body>
<div id="overdiv">
<div id="lowerDiv">
<a class="cross" onclick="onClose()">x</a>
</div>
</div>
</body>
</html>

alert with following picture

I was was wondering if I could make an alert and a picture appear then disappear here's my code
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<center><h1>Are you human???</h1></center>
<button id="button">Yes</button>
<button onclick="no" id="no">No</button>
<script>
function no(){
alert("Really you are interesting")
}
There is no pictures in your code.
But if you mean - show alert popup window, you should add parentheses like so onclick = "no()"
You cannot customize alert window.
But if you want just show some picture after button click, you should add <img> with display: none to the page and onclick change it to display: block.
You can't put a picture in the alert box.You can achieve it by putting up an image in a div keeping the display:none for that and then show hide it like this
function no() {
alert("Really you are interesting")
$("#msg").fadeIn("slow").delay("100").fadeOut("slow");
}
div{
position:fixed;
background-color:rgba(0,0,0,0.8);
width:100%;
height:100%;
display:none;
}
<div id="msg">
<img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png"/>
</div>
<center>
<h1>Are you human???</h1>
</center>
<button id="button">Yes</button>
<button onclick="no()" id="no">No</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

How to bring `Hide Me` button to top of webpage from bottom after image present at top is made to hide?

I Have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function myEvent(){
if(document.getElementById('demo2').innerHTML=="Hide Me"){
document.getElementById('demo1').src='none';
document.getElementById('demo2').innerHTML='Display Me';
}
else {
document.getElementById('demo1').src="deepika.jpg";
document.getElementById('demo2').innerHTML="Hide Me";
changeCSS();
}
}
function changeCSS(){
document.getElementById('demo1').style.height="500";
document.getElementById('demo1').style.width="400";
}
</script>
</head>
<body>
<img src="deepika.jpg" id="demo1" height="500" width="400"><br>
<button type="button" id="demo2" onclick=myEvent()>Hide Me</button>
</body>
</html>
After clicking on Hide Me button I get this page:
Now I want to completely remove the picture block and bring Display Me button to top of the page. How can I do so?
I want to use plain JavaScript only and no JQuery
If I understand the question properly, you want to toggle the display of image upon button click. You can use the below updated myEvent function:
function myEvent(){
if(document.getElementById('demo2').innerHTML=="Hide Me"){
document.getElementById('demo1').src='none';
document.getElementById('demo1').style.display = "none";
document.getElementById('demo2').innerHTML='Display Me';
}
else {
document.getElementById('demo1').style.display = "";
document.getElementById('demo1').src="deepika.jpg";
document.getElementById('demo2').innerHTML="Hide Me";
changeCSS();
}
}

Button onClick FadeIn Text

I'd like that somebody could give me an heads-up with the code to achieve this events:
User clicks a button;
Button disappears;
Text fades in saying "Saved!" in the SAME POSITION of the button;
Text fades out;
Button (from 2nd step) reappears.
Here's the code of the button:
<input type="submit" name="gravarpalp" value="Save" />
Thanks in advance!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('#saveme').click(function() {
$('#saveme').fadeOut('slow', function() {
$('#saved').fadeIn('slow', function() {
$('#saved').fadeOut('slow', function() {
$('#saveme').fadeIn('slow', function() {
});
});
});
});
});
});
</script>
</head>
<body>
<div id="saved" style="position:absolute;top:10px;left:10px;display:none">Saved</div>
<input type="submit" name="gravarpalp" value="Save" id="saveme" style="position:absolute;top:10px;left:10px;"/>
</body>
</html>
I would use jquery to accomplish this.
First, put the controls inside of a div with the following css properties set
<div>
<span id="fadeSpan" style='position: relative; display: none;>Saved!</span>
<input id="fadeButton" type="submit" name="gravarpalp" value="Save" style='position: relative;' onclick='fadeEffect();' />
</div>
Then add the following function in a script tag. This isn't tested though, it's just to get you started.
function() fadeEffect(){
$('#fadeButton').fadeToggle();
$('#fadeSpan').fadeToggle();
setTimeout(function(){
$('#fadeButton').fadeToggle();
$('#fadeSpan').fadeToggle();
}, 3000);
}
Check out this link. Looks like you should just be able to set the ForeColor of a Label to a color value that has a different alpha value.
button1.Visible = false;
//make label fade in (alpha value++)
//once opacity reaches 255, make it fade out (alpha value--)
button1.Visible = true;
I think you will need some sort of timer so the fade in and out isn't so instant. I'll try explaining better if you need.
EDIT: Sorry, I assumed this was a WinForms app... This won't work for a web application. Try using jQuery or javascript.

Categories

Resources