I'm trying to code a text adventure and since I've mostly been coding in PHP instead of Javascript, I think I forgot everything about Javascript :P
Anyway, I'm looking for how to show a new button after clicking another button. I have text in "innerHTML" so I don't know how to show another button using that. This is the code I have so far (and the new button is supposed to lead to "b" when you click it)
<script>
function one()
{
document.getElementById("a").innerHTML="You feel something on the ground, and you think it's a stick.";
}
function two()
{
document.getElementById("b").innerHTML="You pick up the stick. It might be useful for something.";
}
</script>
<div style="margin-left:15px; width:200px; margin-top:100px;">
<button onclick="one()">Feel around the cave</button>
</div>
<div style="margin-left:255px; width:200px; margin-top:-15px;">
</div>
<div id="entire" style="margin-left:490px; margin-top:-22px; width:400px; height:600px;"><div id="b"></div><div id="a"></div></div>
At the end of your page add the following code in a script tag
var a = document.getElementById('a');
a.addEventListener('click', function () { two()});
You should look jQuery
Try adding this to your one() function:
var newButton = '<button onclick="two()">Pick up stick</button>';
document.getElementById("a").innerHTML="You feel something on the ground, and you think it's a stick."+newButton;
This will put the button inside the "a" div.
Related
I have the follow simple code for a confirm box
<!DOCTYPE html>
<html>
<body>
<p>Click the button to alert the hostname of the current URL.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
confirm("Confirm!!!!");
}
</script>
</body>
</html>
but my problem is I want with css to style the OK and Cancel button with a very simple way. I'm looking for a real simple solution.
This question has been asked more:
How to style default confirm box with only css?
confirm box styling
Answer; you can NOT style the confirm() function it's dialog box since it's browser generic.
You will have to search for alternatives like these:
jQuery Boxy: onehackoranother.com/projects/jquery/boxy/
jQuery Dialog: jqueryui.com/dialog/#modal-confirmation
You could also try to create your own dialog box. Which is not quite simple as you asked for. However, lot's of tutorials can be found:
Tutorial 1: www.developphp.com/view.php?tid=1385
Tutorial 2: tutorialzine.com/2010/12/better-confirm-box-jquery-css3/
(Sorry, as a beginner I'm not allowed to place more links)
alert and confirm are built-in to JavaScript and STOP page execution until they are answered, which is what allows you to do:
if( confirm('do you want to see this?') ) {
//show them.
}
Any confirm() solution that you work-up that can be styled won't be able to be included in an if statement. If you want code to only execute when the confirm is clicked, then you need to make that code as a callback, which make the above code look more like this:
mySpecialConfirm('do you want to see this?', function() {
//show them
} );
Then, you have to wire that function call into the "ok" button click on the confirm dialog that you create. This means that it's inherently more complicated just from a coding standpoint not to mention the code that has to wire that up to an HTML form. I would say that it's not worth it to re-invent the wheel and make your own modal. This means that you need to choose jQuery and jQuery UI, or jQuery and Bootstrap, or Dojo Toolkit, etc., and then from there look for the solution that they have for doing this, or use their modals.
As far as I know, you can't change the style of native pop up windows, but you can create your own with a bit of JavaScript trickery.
function promptWindow() {
// Create template
var box = document.createElement("div");
var cancel = document.createElement("button");
cancel.innerHTML = "Cancel";
cancel.onclick = function() { document.body.removeChild(this.parentNode) }
var text = document.createTextNode("Please enter a message!");
var input = document.createElement("textarea");
box.appendChild(text);
box.appendChild(input);
box.appendChild(cancel);
// Style box
box.style.position = "absolute";
box.style.width = "400px";
box.style.height = "300px";
// Center box.
box.style.left = (window.innerWidth / 2) -100;
box.style.top = "100px";
// Append box to body
document.body.appendChild(box);
}
After calling promptWindow you have your own pop up box, which you are free to style!
Hope this helped!
I have a website where there is a side menu filled with links. On top of that are some Next and Prev buttons for the user to switch between the menus of links.
I want to change this so that the menu will automatically change after x amount of time.
I thought something like this would do it:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function delayer(){
window.location = "http://www.google.com" }
</script>
</head>
<body onLoad="setTimeout('delayer()', 1000)">
</body>
</html>
Basically, instead of opening google, I want the page to run the "Next" button which is represented by:
<div class="navBtns mar9 s3">
<span></span>
<span></span>
</div>
Any idea on how to do this? Thanks!!
If you'd like to "click" the next button, then you can do that programatically with JS.
var nextbutton = document.getElementsByClassName('next');
nextbutton.click();
Getting element by class like that only works on post-IE8 browsers.
<span></span>
This hyperlink does nothing by itself. Somewhere on the site, there is a javascript function bound to the click event of this link. You need to either trigger a click event on the link, or call the javascript directly.
Without seeing the rest of the javascript / knowing what frameworks are in use on the page, it's impossible to give a more precise answer.
-- EDIT --
Based on your comment, you may be able to do something along these lines:
<script type="text/javascript">
setTimeout(function() {
$('#page_HOME .slider .next').click();
}, 1000);
</script>
As long as those hyperlinks are contained inside the slider element, the above code will trigger a change in your side menu after 1000 milliseconds
You could find the HREF of the link you want based on the class name of the link, using plain old JS.
window.location = document.querySelector(<link class name>).getAttribute("href");
This will redirect the browser to whatever the href attribute is set to.
If you wanted to keep a function like you have, you could use this:
function delay(link, time) {
setTimeout(function() {
window.location = document.querySelector("." + linkClass).getAttribute("href");
}, time);
}
Then to use it, just say:
delay("next", 5000); // go to the href of the link with the class "next" after 5 seconds.
is there any one who is familiar with YUI jQuery frame work ?? i need very little help
please take the look at below code
It works perfect but the inputClick() is called when i press any button left or right but i dont want button, i want to call function when page loads means automatically
please help me some one.
in short I want to call inputclick(e){......} automatically when page load
i heard about domready function which is same like JQuery's document.ready function
so how should i call inputClick(e)??
please take look at this ::
<section id="btns">
<p>
<input type="button" value="Left">
<input type="button" value="Right">
</p>
</selection>
<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
<script>
document.querySelector('#btns').addEventListener("click", inputClick, false);
function inputClick(e){
var a = e.target.value;
window.alert(a); // displays Left or Right button value
}
</script>
i tried inputClick(Left); and inputClick(Roght); but do nothing :(
What i need is when page load ::
rnd = random(2);
switch(rnd)
case 1:
inputClick(Left);
case 2:
inputClick(Right);
i DONT want button or eventlistener
I hope this helps. http://jsfiddle.net/Rh7Ju/1/
Know that anything in the YUI().use() will execute when the DOM is ready.
YUI().use('node', 'event', function (Y) {
function inputClick(button_value) {
alert(button_value);
}
// called when the buttons are clicked
Y.one('#btns').on('click', function (e) {
inputClick(e.target.get('value'));
}, 'input');
inputClick('Right'); // called when the dom is ready.
});
After I looked at your question again, is seems like you are trying to randomly select a button and alert its value. So, maybe this is more what you're looking for?
http://jsfiddle.net/Rh7Ju/2/
Anyway, happy coding.
I am trying to learn a little bit of java script, an any help would be greatly appreciated as I am pretty new to this world and just learning. I have tried looking up and down this site and have tried several suggestions from other users but none really seem to answer my issue.
I have this bit of code:
Im simply trying to get it to slowly hide a div box when the x is clicked. the button shows up and can be clicked but nothing happens. can someone help me out and show me what I'm doing wrong?
<div id="daily_deal">
<button id="close_x" onclick="myFunction($)"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>
<div id="widget"><iframe src="dailydeal_widget.asp" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:155px; height:355px;" allowtransparency="true"></iframe></div>
function myFunction($) {
$(document).ready(function() {
$("#close_x").click(function () {
$("#widget").slideToggle("slow");
});
});
})(jQuery);
You only need this bit:
$(document).ready(function() {
$("#close_x").click(function () {
$("#widget").slideToggle("slow");
});
});
And then you can remove the onclick from the button:
<button id="close_x"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>
What it was doing is binding to the document ready event when you clicked the button, but as this has already happened the code that binds the click event is never run.
Use
<button id="close_x" onclick="toggleWidget();">
and
function toggleWidget() {
$("#widget").slideToggle("slow");
}
You can remove the $(document).ready() row. That is, remove line 2 and 6 from your function. It's implying that you want to do something when page has loaded, which will not occur at the same time as this function is called.
You only need this code:
$(document).ready(function() {
$("#close_x").on("click", function () {
$("#widget").slideToggle("slow");
});
});
the onclick="myFunction($)" is not neccessary anymore.
No need to call function in onclick, so your resultant html should be like this.
<button id="close_x"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>
And your script should be
$(document).ready(function() {
$("#close_x").click(function () {
$("#widget").slideToggle("slow");
});
});
you can try this function for hide and show div tag:
$(document).ready(function(){
$(".productDescription").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".productDescription").slideToggle();
return false;
});
});
Like HtmL Code:
See Full Description
<div class="productDescription">
<p>This very large bath bomb will fizz up to two minutes, how good is that. Drizzled with soap it looks so authentic. This cake slice has a scent of Tropical Fruit including Pineapple, Mango & Grapefruit and you'll be surrounded by gorgeous flowers and glitter. Hide</p></div>
First posting. I am attempting to use buttons defined in HTML to call a function that creates buttons via JavaScript while the other button removes the buttons created.
HTML:
<div id="thisdiv">
<input type="button" onclick="makeButtons()" value="Add" />
<input type="button" onclick="removeButtons()" value="Remove" />
</div>
Javascript:
function makeButtons()
{
var buttonOne=document.createElement("BUTTON");
var buttonTwo=document.createElement("BUTTON");
buttonOne.setAttribute("id", "yesdombutton"); //adds id to button
buttonTwo.setAttribute("id", "nodombutton"); //adds id to button
document.getElementById("thisdiv").appendChild(buttonOne); //appends buttons
document.getElementById("thisdiv").appendChild(buttonTwo);
}
function removeButtons()
{
var div = document.getElementById("thisdiv");
div.removeChild(yesdombutton); //this works only once in firefox but >
div.removeChild(nodombutton); //works over and over in IE
}
As the comment sin the remove() function state, the code as is only works once in Firefox, but works fine in IE10. And by work, I mean that I can click the Yes and No buttons in the HTML section, back and forth, and the buttons created by the JavaScript appear and disappear as they should.
I would like the same to occur in Firefox but I have been unable to find an answer.
And a friend of mine mentioned that I have a scope issue... The following code makes the site work like how I want it to.
Javascript:
function removeButtons()
{
var div = document.getElementById("albumown");
var destroyMe = document.getElementById("yesdombutton"); //This makes it so that
var destroyMeToo = document.getElementById("nodombutton"); //the buttons I want to
//remove are referenced
div.removeChild(destroyMe); //correctly
div.removeChild(destroyMeToo);
}
Thank you to those that asked about this! I have been wracking my head for a week trying different things. But, all is well now.