I'm trying to make a game in which you click a directional button and the screen reads how far you've moved and in what direction. I have the buttons set, and using onClick I've set them to read "moved 5 meters "direction", but the text doesn't appear when I run it. Here's a snippet of my code:
<FORM>
<INPUT type="button" value="North" name="n" onClick="document.write("moved 5 meters north");">
<INPUT type="button" value="East" name="e" onClick="document.write("moved 5 meters east");">
<INPUT type="button" value="South" name="s" onClick="document.write("moved 5 meters south");">
<INPUT type="button" value="West" name="w" onClick="document.write("moved 5 meters west");">
</FORM>
Try defining onclick event in script element outside of html ; substituting setting span element .innerHTML utilizing .value of event.target for document.write() as document.write() overwrites existing html
<FORM id="form" name="form">
<INPUT type="button" value="North" name="n" />
<INPUT type="button" value="East" name="e" />
<INPUT type="button" value="South" name="s" />
<INPUT type="button" value="West" name="w" />
</FORM>
<span></span>
<script>
document.forms["form"].onclick = function(e) {
this.nextElementSibling
.innerHTML = "moved 5 meters " + e.target.value
}
</script>
HTML might look like:
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
#import 'external.css';
</style>
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<form name='whatever' action='#' method='post'>
<input type='button' value='North' name='n' id='n' />
<input type='button' value='East' name='e' id='e' />
<input type='button' value='South' name='s' id='s' />
<input type='button' value='West' name='w' id='w' />
</form>
<div id='output'></div>
</body>
</html>
JavaScript on external.js may look like:
//<![CDATA[
var pre = onload; // for previous onload as there can only be one at a time using this methodology
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function E(id){
return doc.getElementById(id);
}
var buttonInfo = {n:'North', e:'East', s:'South', w:'West'}, out = E('output');
for(var i in buttonInfo){
(function(i){ // scope off i with closure
E(i).onclick = function(){
out.innerHTML = 'moved 5 meters '+buttonInfo[i];
}
})(i);
}
doc.forms[0].onsubmit = function(){
// do stuff you need to here if submitting
// prevent enter key from submitting form
return false;
}
}
//]]>
Your mistake is using " inside the onclick. Use ' in this way:
onclick="document.write('moved 5 meters north')"
You can also escape the " using \
onclick="document.write(\"moved 5 meters north\")"
Use single quotes for the 'moved 5 meters north'. If you use double quotes, it reads the first double quote as closing the double quote in front of "document".
Should look like this:
<INPUT type="button" value="North" name="n" onClick="document.write('moved 5 meters north');">
Related
I'm using CodeSandbox.io
I wrote some JavaScript that runs fine when I include it in tags in the file.
But when I put it in a separate file, it doesn't run
Here is my code:
https://codesandbox.io/s/brave-voice-6kqtq3?file=/index.html
My HTML:
<html>
<head>
<script src="./script.js"></script>
</head>
<body>
<!--
html comment, not code, not displayed on page
-->
<form name="hi" action="https://www.google.com/search">
<input type="text" name="q" size="20" id="search_query" />
<br /><br />
<input
type="button"
onclick="return omg2('thank you', 'goldenrod', 20);"
value="OMG"
/>
<input
type="button"
onclick="return omg2('thanks', 'aquamarine')"
value="omg"
/>
<input type="submit" value="google" />
</form>
</body>
</html>
Here is my JavaScript:
function omg2(value, bgcolor, size = 40) {
//var textbox = document.hi.q;
var textbox = document.getElementById('search_query');
textbox.value = value + '; ' + 'size = ' + size ;
textbox.style.backgroundColor = bgcolor;
textbox.setAttribute('size', size);
}
I have a script that builds a html box to input values to use in the script afterwards. Before I used input text. But the values inserted were often wrong, which caused annoyance by the users. And me.
So I want to use a button instead of text input. The button has to toggle between two or more values when clicked. Then when I submit the form, the values have to be passed to the script.
But the onclick doesn't seem to work. What am I missing?
The variable "vervanger" is put in place of "vervanger2" in the html box.
I get the button in my browser but nothing happens when I click on it.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lijst=[];
function selector(){
for (i=0;i<vervanger1;i++){
if (document.getElementById(i).checked==true){
lijst.push(document.getElementById(i).value);
}
if (document.getElementById(i).name.toString().split(":")[0]=="overzicht"||document.getElementById(i).name.toString().split(":")[0]=="evalueer"){
lijst.push(document.getElementById(i).name+":"+document.getElementById(i).value);
}
}
google.script.run.handleFormSubmit(lijst);
}
function change(e){
var btn = document.getElementById(e);
btn.value = 'my value'; // will just add a hidden value
btn.innerHTML = 'my text';
}
</script>
</head>
<body>
<br />
<br />
<FORM NAME="myform" onSubmit="selector()">
<input type="button" onclick="change(0)" size="3" id="0" style="text-align: center" name="Eval" value="E" /input>TEST STRING<br />
<br />
<br />
<input name="Submit" type="submit" value="OK" />
</FORM>
</body>
You have got your button type wrong.
<input name="Submit" type="submit" value="OK" />
This will post your form.
Change it to "button" and you should be good to go..
I found a solution. Thanks to various other posts on Stackoverflow.
Now I'm able to toggle between values by pushing the button.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var lijst=[];
function selector(){
for (i=0;i<vervanger1;i++){
if (document.getElementById(i).checked==true){
lijst.push(document.getElementById(i).value);
}
if (document.getElementById(i).name.toString().split(":")[0]=="overzicht"||document.getElementById(i).name.toString().split(":")[0]=="evalueer"){
lijst.push(document.getElementById(i).name+":"+document.getElementById(i).value);
}
}
google.script.run.handleFormSubmit(lijst);
}
function change(e,choices){
var btn = document.getElementById(e);
var chs=choices.toString().split("/");
var check="nee";
for (c=0;c<chs.length;c++){
if (chs[c]===btn.value){
check="ja";
var nr=c;
}
}
if (check=="ja"&&nr<chs.length-1){
btn.value=chs[nr+1];
}else{
btn.value=chs[0];
}
}
</script>
</head>
<body>
<br />
<br />
<FORM NAME="myform" onSubmit="selector()">
<input type="button" onclick="change(0,'A/B/C')" size="3" id="0" style="text-align: center" name="Eval" value="E" /input>TEST STRING<br />
<input type="button" onclick="change(1,'A/B/C')" size="3" id="1" style="text-align: center" name="Eval" value="E" /input>TEST STRING<br />
<br />
<br />
<input name="Submit" type="submit" value="OK" />
</FORM>
</body>
The title is kinda confusing because I find it hard to explain. Basically, I can get 1 input button to have one id name that a JavaScript function will store into a variable and display it by replacing an empty paragraph tag with the variable. However, I can't get it to work with multiple buttons with the same function, since I'm trying to get a number keypad going with buttons, and having it display the result. I think I need to use the push() method to somehow add values, then click a submit button, then have the resulting string displayed. I know how to use push with known variables, but I don't know how to implement it with unknown variables, though:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");
Anyways, my code is here, with the input buttons with only 1 button with the i, and etc. jQuery answers are welcome, but I don't prefer jQuery, as I'm asking about JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Desperate</title>
<script type="text/javascript">
function othername() {
var inputinput = document.getElementById("userInput").value;
var n = inputinput.length;
document.getElementById("demo").innerHTML = n;
}
</script>
</head>
<body>
<p id="demo"></p>
<input id="text" type="text">
</div>
<div>
<input id="userInput" type="button" value="1" onclick="othername();" />
<input id="btn2" type="button" value="2" onclick="othername();" />
<input id="btn3" type="button" value="3" onclick="othername();" />
</div>
</body>
</html>
All help is greatly appreciated! Thank you!
You should bind your onclick event handler in a different way. Then you can examine the incoming event in your "othername" function and get the value of the element clicked.
<!DOCTYPE html>
<html>
<head>
<title>Desperate</title>
<script type="text/javascript">
function othername(e) {
var n = e.srcElement.value || '';
document.getElementById("demo").innerHTML = n;
}
</script>
</head>
<body>
<div>
<p id="demo"></p>
<input id="text" type="text">
</div>
<div id="btns">
<input id="userInput" type="button" value="1" />
<input id="btn2" type="button" value="2" />
<input id="btn3" type="button" value="3" />
</div>
<script>
var btnC = document.getElementById("btns");
btnC.onclick = othername;
</script>
</body>
</html>
This is my page code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Marketing Tracking</title>
</head>
<body>
<form action="#" id="form" method="post">
<div id="namevalues">
<span id="span:1">
<input type="text" id="name:1" onchange="changed(this)" style="width:300px;"/>
<input id="value:1" type="number" min="0" value="0" /><br /></span>
</div>
<input type="button" id="add" value="Add 1" />
<br />
<textarea name="talk" style="width:500px;height:175px;"></textarea>
<br />
<input type="button" id="update" value="Update"/>
</form>
<script>
function get(a){return document.getElementById(a);}
up=get("update");
up.onclick = function(){
get("form").submit();
}
get("name:1").onchange = function(){changed(this)};
get("add").onclick = function(){add()};<% z=2 %>
function changed(ele){
id=ele.id;
val=ele.value;
id=id.split(":")[1];
get("value:"+id).name=get("name:"+id).value;
}
function add(){
document.getElementById("namevalues").innerHTML+='<span id="span:'+z+'"><input type="text" id="name:'+z+'" onchange="changed(this)" style="width:300px;"/><input id="value:'+z+'" type="number" min="0" value="0" /><br /></span>';
}
</script>
</body>
</html>
I am very confused as to why when I press the Add 1 button enter some text and then press the Add 1 button again the text that I just entered disappears!
If anyone could give some insight to this it would be greatly appreciated.
The reason your other values disappear is because when you do something.innerHTML += something it will rewrite the HTML for that zone (meaning what was there before is gone and will be replaced with fresh new HTML). What you probably want to do is something along this :
function add(){
var div = document.createElement("div");
div.innerHTML = '<span id="span [... the rest of the code ...]<br /></span>';
document.getElementById("namevalues").appendChild(div);
}
Using appendChild won't alter the other element that are already in the div namevalues.
Just a small thing but try using
<script type="text/javascript">
When I was using inner.document stuff I had all kinds of problems until I added that code.
When I add text to a div in a chrome extension popup, the text appears for a fraction of a second and then immediately dissappears again.
This is a small example:
<html>
<head>
<script>
function show() {
var newName = document.showMe.textToShow.value;
var txt = document.createTextNode(newName);
document.getElementById("feedback").appendChild(txt);
}
</script>
</head>
<body>
<form name="showMe">
Name: <input type="text" name="textToShow" /><br />
<input type="submit" value="Show" OnClick="show()" />
</form>
<div id="feedback"></div>
</body>
</html>
What am I doing wrong?
Thanks,
Miel.
It works, but then the form gets submitted. You have to suppress sending the form like this
<input type="submit" value="Show" OnClick="show(); return false" />
or use a button:
<button type="button" onclick="show()">Show</button>