I am trying to make a text-based (With ASCII art) RPG game and I am having trouble with the opening sequences. Here's my script for the opening:
<body>
<pre>
Welcome To __________! <!-- No name yet :P -->
<button onclick="menuButtonPressed1()" type="button">Cool, is this the whole game?</button>
<p id="demo"></p>
<script>
function menuButtonPressed1() {
document.getElementById("demo").innerHTML = "No, there's more!";
}
</script>
</pre>
</body>
This code works fine for getting the button to show the text and all, but what I want to do is make it so that the button clears the current text on screen and changes the button to a different text. For example, what I want is that it says something, but when I press the button it will change the text and the button's text will change too. So if you see: (Ignore the color)
Welcome to ____!
(There will be button here with text "Cool, is this the whole game?")
and you press it you'll clear all the current text on screen and get only: (Again, ignore the color)
Hello to you!
(There is another button here with different text)
If there is something I could add to this to make it easier to understand or easier to answer etc. please tell me so I can correct it. I'm not very good with html yet, so if I might have gotten something completely wrong in my code, I'm sure you can understand.
you should wrap the text in some tag like <p> or <span>. Then give it an ID and use that ID at onClick of button to change that text along with button text.
It just use the same code with different ID.
Related
I built a webpage for a professor at USF. I was wondering how to make the form submit button in the image below show up inline with the text. It looks sort of funny as is.
My current code is,
<div>The term $table is not in DDIRANK, but there are enough search results on PubMed for us to add it. To add the term, please click this button<form action=\"add_term.php\" target=\"_blank\" method=\"post\"><input type=\"hidden\" value=\"$table\" name=\"add\"><input type=\"submit\" value=\"Add $table to database\"></form> and wait for the page to load.</div>;
To make the submit button inline with the text field you will need to go to add float: left; to the button's CSS.
Declare the CSS attribute like so:
<form style="float: left">...
I am sort of a beginner at this, but my objective is to have the header of my webpage changing, depending on what button was clicked on another page.
More precisely, I have a webpage with 7 buttons on it coded like this:
<form action="contribution.html">
<input type="submit" style="margin-right: 80px;margin-top: 25px;" value="I contribute">
</form>
All of the buttons lead to the same "contribution.html" page, but I would like the header of that page to be different depending on what button the user clicked. There must be a way to do this without creating 7 different "contribution.html" pages for each button... I assume.
Can anyone help, please?
When you do form submission server receives HTTP post request that contains button clicked. Having that request server side can generate proper content of <title> element. Browser will render that text in <title> as a caption of tab/page.
Thus you will need something like PHP or the like on your server. In this case you can have single contribution.php file (but not static html).
Using javascript is the easiest solution. If you spend a little time learning jQuery, you could use something like this:
// A reference to your "header" element
var header = $('.header');
// When the submit button is clicked
$('[type=submit]').click(function(){
// Update the header with the button's text
header.text( $(this).value() );
});
Though I'd recommend using a more specific selector for the buttons you want this to work for, [type-submit] is too generic but I used it because you did.
Use a server-side language and <a> tags instead of a form.
In PHP it will look something like this:
10$
20$
30$
etc.
Then on contribution.php you can get the request data from $_GET['sum'] and act accordingly.
Depending on your application and if you want to be SEO Friendly you should look into this answer How to dynamically change a web page's title?
I want dynamically add text-box in html page when user is press a button. and after that i want to get the respective field value or all field value.
I tried doing ng-repeat but it will not work. can anyone tell me how i will achieve this.
I would indeed use ng-repeat, and just push a new object onto the array. Maybe something like this?
<button ng-click="textFields.push("")">Add</button>
<textarea ng-repeat="val in textFields" ng-model="val"></textarea>
Well there are a few things you could try. One of them is loading a hidden div when clicked on the button. The hidden div contains the text box.
Like this :
$(document).ready(function(){
$("#hiddendiv").hide();
$("#button").click(function(){
$("#zmedia").show();
}};
And in your html form you just add a div that contains a textbox and the id of the dive should be "hiddendiv". The downside is that once the hidden div is loaded, it cant be removed. There are other scripts that are a lot more sophisticated, check these links out:
https://github.com/wam/jquery-addable
http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/
Is there a way to make only a portion of text in a text area static or read-only without disabling the entire text area?
Basically, I want a person to be able to update a status using a textarea, and the static text would have their name and the verb is at the begining, like:
Eric is: "Riding a bike"
Is this possible?
Basic text area <input="textarea" blah="" blah"">
Further to the wishes of Jukka,
Not without using javascript to fake the effect. You'd have to handle keyboard events, mouse events and be able to identify your caret position within the textarea - all in a cross-browser friendly way. I'd run to the hills with my hands in the air!....
Or use something that makes more sense -
Show the "Eric is:" inside a label, have the "Riding a bike" inside a text input. The javascript needed to populate the label with that text is minuscule compared to that required to do it all with a textarea.
The markup could be as simple as:
<label>Eric is: <input type='textarea' blah="\" blah\"" value='Riding a bike'></label>
I'd like to create a link that when it is clicked it will open up a some sort of dialog with some text a user can copy.
I was going to use jquery ui dialog for this but I'm wondering if there is something else I should consider?
Ideally I'd like to have that text highlighted so it is ready to copy. Don't think I can do this with jquery dialog?
Any guidance would be appreciated.
Try this :
HTML :
<div id="dialog">
<textarea id="textbox">some text to copy and paste</textarea>
</div>
JavaScript:
$('#dialog').dialog();
$('#textbox').focus().select();
This opens a dialog and then selects all of the text within the textarea. Because the focus function is used you can Ctrl+C straight off as the text is already in focus and selected.
Working demo : http://jsfiddle.net/eZbXD/
Instead of opening a dialog, you can show a textbox in which the link is selected and ready to copy. I have done something like that before. Look at this fiddle. You can remove unnecessary codes and give some style according to your need.