Okay, so here is what I'm trying to do. I have two textboxes and the user will enter a number in each one. Then, when they click the button, a third textbox should appear with the lowest number inside.
My textbox appears, but I can't get the lowest number to appear with it. Here is my code so far.
<html>
<head></head>
<body>
<script>
function addTextBox() {
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("id", "Text3");
document.body.appendChild(element);
fill();
}
function fill() {
value = Math.min(document.getElementById("Text1").value, document.getElementById("Text2").value);
}
</script>
<form>
<input type="text" id="Text1" value="Number 1">
<input type="text" id="Text2" value="Number 2">
<input type="button" onclick="addTextBox()">
</form>
</body>
</html>
You didn't set the value of the input to value, only calculated it. So a correct addTextBox() function would be:
function addTextBox() {
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("id", "Text3");
document.body.appendChild(element);
element.value = Math.min(document.getElementById("Text1").value, document.getElementById("Text2").value);
}
Make sure you type numbers into the input, otherwise you'd get NaN.
Related
I'm trying to change the contents of an input tag using a JS function but nothing I tried seems to work. Here's what I tried:
function go (){
document.getElementById("input").innerHTML.value = 5;
};
<body>
<input type="number" id="input">
<button onclick="go()">go</button>
</body>
Would really appreaciate it if someone show me how this is done
just use document.getElementById("input").value
function go (){
document.getElementById("input").value = 5;
};
<body>
<input type="number" id="input">
<button onclick="go()">go</button>
</body>
You don't want to change the innerHTML, just the value of the input element (which is an attribute). So this should work. I changed to a string because that's what attributes usually are, but it shouldn't matter.
document.getElementById("input").value = "5";
In the following code, I am trying to generate a selection box and text field every time a user presses Add button. The problem that I am facing is that how I can generate a new text field with different name. As you can see in the code, the name of the text box is text1. How can I generate a new text box with a name text2, for example.
<html>
<head>
<title></title>
</head>
<body>
<h1><center>Querying Social Media</center></h1>
<form>
<center>
<select>
<option value="Author">Author</option>
<option value="Mention">Mention</option>
<option value="Tag">Tag</option>
</select>
<input type="text" name="text1">
<select>
<option value="And">And</option>
<option value="Or">Or</option>
</select>
<input type="button" value="Add" onclick="add(document.forms[0].element.value)"/>
<script language="javascript">
function add(type) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
</SCRIPT>
</center>
</form>
<span id="fooBar"> </span>
</body>
</html>
you can make three global variables for all three type and every time add function called you make increment on global viable depending on type and then set the name of textbox like (textbox_1,textbox_2, ...) .
what you think>
You have to do it like this:
function add(type, value, name) {
//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", value);
element.setAttribute("name", name);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);
}
add("input","someValue", "text2");
<span id="fooBar"></span>
I am unable to get the function AreaT() to verify and validate the entered value in the input box as the answer to the area of a triangle.
I keep getting "wrong" message even for the correct answer.
What am I doing wrong?
Thank you for taking the time to check my code.
<html>
<head>
<script>
var height = Math.floor(Math.random()*20 +1);
var base = Math.floor(Math.random()*30 +2);
var area = getElementById("area");
function AreaT(){
document.getElementById('height').value = height;
document.getElementById('base').value = base;
if(area== 1/2 * base * height){
document.write("correct")
}
else{
document.write("wrong");
}
}
</script>
</head>
<body>
<form>
<h2>HEIGHT:</h2><input type="button" size="20" id="height"/>
<h2>BASE: </h2><input type="button" size="20" id="base"/>
<h2>AREA: </h2>Enter The Area here:<input type="text" size="20" id="area"/>
<input type="button" size="20" value = "Calculate" onClick ="AreaT()"/>
</form>
</body>
</html>
Try this:
HTML
<body>
<h2>HEIGHT:</h2><input type="button" size="20" id="height"/>
<h2>BASE: </h2><input type="button" size="20" id="base"/>
<h2>AREA: </h2>Enter The Area here:<input type="number" size="20" id="area"/>
<input type="button" size="20" value = "Calculate" onClick ="AreaT()"/>
</body>
Javascript (put in <header> tag)
var height = Math.floor(Math.random()*20 +1);
var base = Math.floor(Math.random()*30 +2);
document.getElementById('height').value = height;
document.getElementById('base').value = base;
function AreaT(){
var area = document.getElementById("area").value;
if(area == 1/2 * base * height){
document.write("correct")
}
else{
document.write("wrong");
}
}
Adding on to what was already mentioned, you need to add a .value to the area element as well. I also changed the input type of AREA to number.
Change getElementById("area") to document.getElementById("area").value. You also need to assign area from inside your AreaT() function, otherwise it's not gonna get the value that the user typed in.
Also, your javascript needs to be below those form elements, otherwise it can't "see" them and you will get undefined values.
I'm trying to code a function where you can insert as many new input fields as the user want in JavaScript. Here is my code :
<SCRIPT language="javascript">
function add() {
var element = document.createElement("input");
element.setAttribute("type", 'text');
element.setAttribute("value", 'text');
element.setAttribute("name", 'text');
var foo = document.getElementById("fooBar");
foo.appendChild(element);
}
</SCRIPT>
Html Part
<form>
<input type="text" name="answer" autofocus="autofocus" ONBLUR="if(this.value!=''){this.form.submit()};" placeholder="Modify answer"/>
<span id="fooBar"> </span>
<input type="button" value="Add" onclick="add()"/>
</form>
This is working well, but not if I put it in this html structure :
<table>
<tr><td><form> <!--my html part -include the second form--> </form></td></tr>
</table>
I don't really know why, as I'm not expert in js.. Is that because I'm in a td tag or because one form is inside the other.
If anyone can help or have another solution to achieve what I want, would be really greatful
Cheers
Ok so basically what i'm trying to do is create an html document that allows the user to input any thing they want with any number of choices and click a button and get one of the things they typed in to be chosen at random. My girlfriend is really indecisive and sometimes takes hours to make a choice when i'm not around so i thought i'd write her a code to help. I'm not exactly sure how to go about this. I have searched around for a few hours and have found nothing about this. Sorry if it's something extremely simple but any help would be greatly appreciated. So far i have this as a code to get a text box and make a new one appear by clicking the button
`
<html>
<head>
<script type="text/javascript">
var instance = 1;
function newTextBox(element)
{
instance++;
var newInput = document.createElement("INPUT");
newInput.id = "text" + instance;
newInput.name = "text" + instance;
newInput.type = "text";
//document.body.write("<br>");
document.body.insertBefore(newInput, element);
document.body.insertBefore(document.createElement("br"), element);
}
</script>
</head>
<body>
<input id="text2" type="text" name="text1"/> <br>
<input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>
</html>`
I think this should work:
HTML:
<input type="button" value="Get Random" onclick="selectRandomInput();"/> <!-- select a random element among [1,instance] elements. -->
JS:
function selectRandomInput(){
var selectedId=Math.floor(Math.random()*instance+1);
for(var i=0;i<document.getElementsByTagName("input").length;i++){
element=document.getElementsByTagName("input")[i];
if(element.id!=selectedId && element.type!="button")
element.style.display="none";
}
}
PS: A better solution is to add a class to input text elements, and iterate over those having this class instead of all input tags.