New course! Every coder should learn Generative AI!
Try a free lesson0
How can I use in my code text input instead of prompt boxes?
The code is MegaMan fan game beta
8 Answers
+ 5
By the way suggested by @<Java/Spyder></Cup o' JS> you can have many <input> ( with different 'id's ), or handle a custom 'prompt-bowe-like' integrated in html with a unique <input> to be used many time... as you want/need ^^
+ 5
You mean: how to change the Html text used as question/text information for the user?
Suppose you want have this simple model:
Text to be displayed:
+-------------------------------+
| Answer zone |
+-------------------------------+
You write some html like:
<div id="iobox">
<span id="msg">Text to be displayed:</span>
<br>
<input type="text" id="entry" placeholder="Answer zone">
</div>
In JS, you read/write access these by:
var html_text_content = document.getEmementById('msg').innerHTML;
document.getEmementById('msg').innerHTML = 'New <b>html text</b> content'; // assign new value, html format will be parsed
var user_text_content = document.getEmementById('entry').value;
document.getEmementById('entry').value = ''; // assign new value, clear with empty string
+ 3
Use the HTML property <input/>, and set the type attribute as "text". To use the text in a JS function, make a button with the onclick attribute.
<div id="textInput">
<input id="userText" type="text" size="20"/><!-- size sets the visible amount of characters in the box-->
<button onclick="some_JS_func()">Submit</button>
<script>
function some_JS_func(){
document.getElementById("userText").some method;
}
+ 3
Multiple inputs? Simple! Just create a break line (<br/>) after each input and duplicate the previous input, but change the id. Like so:
<input id="input_1" type="text"/>
<br/><input id="input_2" type="text"/>
<br/><input id="input_3" type="text"/>
And so on. You can use the same button to submit all the text values at once, or make one button for each.
+ 3
To change the HTML, make it a function. So if, for example, you wanted to trigger an attack every time the screen is clicked, make give the screen div an onclick attribute.
<head><script>
var points=0;
function attack();
points++; document.getElementById("ptCount").innerHTML= "<b>Points: "+ String(points)+"</b>";//<b> makes text bold, and String() converts points to a string so it doesn't produce a number error
</script>
</head>
<div id="screen" onclick="attack()">
<h1 align="center" id="ptCount"></h1>
</div>
This gives one point every time he attacks and shows the new point count with .innerHTML.
EDIT: To make a blast come out of his arm, you'd have to do some CSS3 animation.
+ 2
I started to write a generic [ JS ] class to replace use of js alert/prompt/confirm functions, and I've implement it in your code ( with commented changes ):
https://code.sololearn.com/Wp8x1NemoYJ1/#html
Plus few little graphics enhancement...
However, I hope I haven't forgot any update from your last version ( compared to the one on which I've worked ^^ )
0
But I need many different inputs
0
And how I can change the HTML if for example he uses an attack?
Often have questions like this?
Learn more efficiently, for free:
Hot today
Usage of Carriage Return (`\r')
3 Votes
How to build logic?
1 Votes
I want a little help
0 Votes
Not able to code
0 Votes
Help!
1 Votes