Not sure why the open function is not getting called at the onclick even of the button.
Any help will be highly useful
<html>
<head>
</head>
<body>
<script>
function open(){
alert('gsfhdgf');
document.getElementById("overlay").style.display="block";
document.getElementById("fade").style.display="block";
}
</script>
<div id="fade" style="display:none">
<div id="overlay" style="display:none">
this is my content
</div>
</div>
<button onclick="open()">Click Me!</button>
</body>
</html>
open is already used as a function name (window.open, document.open...)
Name your function something else (preferably something meaningful) and it will work.
Related
<!DOCTYPE html>
<html>
<head>
<script>
//if i put window.location= "index.php" here not inside js function it worked but I need it to be inside a function
function newLoad() {
window.location= "index.php"
}
</script>
</head>
<body>
<input type="button" value="press here" onclick="newLoad()">
</body>
</html>
any Ideas how can I make it work inside the javascript function ?
Your code works. Howether, you don't need to use javascript.
<a href="index.php">
<button>press here</button>
</a>
here it is:
<!DOCTYPE html>
<html>
<body>
<hl>Change an HTML element</hl>
<p id="msg">Now you see me.</p>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Gone!'">
Click Me!</button>
<button type="button"
onclick="document.getElementById('msg').innerHTML = 'Back again!'">
Bring me back!</button>
</body>
</html>
does anyone recommend a way to fix this, because I am stumped.
Though we should create the javascript file separately in real projects. But you can try the following code to test the stuff what you are trying to do/test.
<!DOCTYPE html>
<html>
<body>
<hl>Change an HTML element</hl>
<p id="msg">Now you see me.</p>
<button type="button" id="clickMeButton" onClick = clickMeClicked()>
Click Me!</button>
<button type="button" id="backMeButton" onClick = backMeClicked()>
Bring me back!</button>
<script>
function clickMeClicked() {
document.getElementById("clickMeButton").innerHTML = 'Gone!';
}
function backMeClicked() {
document.getElementById("backMeButton").innerHTML = 'Back again!';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>Welcome !</h1>
<p><b>AN OBJECT</b> is also a variable.<b>Thus an object can also be used to store many values.</b></p>
<p id="demo">Click the button given below !</p>
<button type="button" onclick="me()">Click Here !</button>
<script>
function me()
{
var car ={
model:"BMW",class:"C",weight:"500",}
document.getElementById("demo").innerHTML=car.model+"<br>"+car.class+"<br>"+car.weight;
}
}
</script>
</html>
How do I execute the code in such a way that when I press "Click Here !" it is possible for me to see all the properties mentioned in the code ?
You have an extra } in your code. Another way you can do this is that you can pass the car object to me function from the onClick event as you can make that dynamic depending on who the user is.
<button type="button" onclick='me({model:"BMW",class:"C",weight:"500"})'>Click Here !</button>
<script language="javascript" type="text/javascript">
function me(car){
document.getElementById("demo").innerHTML=car.model+"<br>"+car.class+"<br>"+car.weight;
}
</script>
This is a simple example to call a JS function when a button is clicked. In this code I used the onclick method, but I want to learn how to call the same method using jQuery instead.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#but").click(
doubleSize($("#inpt").val()); // **maybe not correct here**
);
});
function doubleSize(x)
{
//some code make a number double size
}
</script>
</head>
<body>
<input id="inpt" type="text">
<button id="but" type="button" onclick="doubleSize(document.getElementById('inpt').value)" >click me !!</button>
<div><span id="result"></span>
</div>
</body>
</html>
Replace
$("#but").click(
doubleSize($("#inpt").val()); // **maybe not correct here**
);
with
$("#but").click(function() {
doubleSize($("#inpt").val());
});
Now it should work. The trick is that .click function has callback function which controlls doings after click, and you now learned to use it.
Check my fiddle.
Find more on api.jquery.com/click.
What is the best way to replace
var value = prompt("Enter a URL", "http://www.google.com/");
by a javascript modal (preferably pure javascript, if not possible then jquery)
Thanks!
You will need to change theway you call it, so it now follows event-driven programming style like that:
function prompt(question, callback) {
// here build a modal/form and after form submit:
callback(prompt_value);
}
And then use it like that:
prompt('Enter a URL:', function(result){
// do something with the result:
alert(result);
});
For better alerts, you can use bootboxjs.
For a pure JS modal, you can check ModaliseJS which is compatible with any css classes.
Example of ModaliseJS (change the classes to your design, just keep one .close, .confirm and .cancel as you please) :
<!DOCTYPE html>
<html>
<head>
<title>Modal example</title>
<link href="../../dist/modalise.css" rel="stylesheet">
<script src="../../dist/modalise.js" type="text/javascript">
</script>
<script src="app.js" type="text/javascript">
</script>
</head>
<body>
<h1>Example modal 1</h1><button id="openModal">Show the modal</button>
<div class="mdl mdl-fadein" id="exampleModal">
<div class="mdl-content mdl-slidein">
<center>
<div class="mdl-header mdl-band-primary">
<span class="close">X</span>
<h2>Example modal</h2>
</div>
<div class="mdl-body">
<h3>Content modal</h3>
input data: <input type="text" class="inputdata"><br>
</div>
<div class="mdl-footer mdl-band-primary">
<button class="confirm" onclick="return false">Do
thing</button><button class="cancel" onclick=
"return false">Cancel the thing</button>
</div>
</center>
</div>
</div>
</body>
</html>
Javascript :
var myModal = {}
window.onload = function(){
var btnOpen = document.getElementById('queryData'); // The button to open the modal
// if btnsOpen is not given, you can simply use myModal.show()
// Modalise(id, options);
myModal = new Modalise('exampleModal', {
btnsOpen : [btnOpen]
})
.attach()
.on('onConfirm', function(){
console.log(this.querySelector(".inputdata").value);
});
}