HTML input button changing content - javascript

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";

Related

I'm unsure as to why my onclick button doesn't link up with what I type into my textbox?

So I am fairly new to Javascript, and I am working on some code that converts decimal numbers to binary numbers. However when I run this program, I can't seem to get the output I am looking for. The best I have done was get my function to output an exact number already inside of the function, when I am instead trying to get an output that is generated from any number typed into the textbox? I'm not entirely sure where I am going wrong with this. I feel like there is something I am clearly missing, but I can't seem to grasp exactly what it is. I've been using codecademy and w3schools to gain more knowledge of JavaScript, but if anyone has any other resources that helped them when they first started programming that would be great!
<!DOCTYPE html>
<html>
<body>
<p>Convert from Decimal to Binary:</p>
<form method = "post">
<p id = "demo">
<label for="decNum"></label>
<input name="decNum" type="text">
<button onclick="toBinary()">Enter</button>
</p>
</form>
<script>
function toBinary() {
document.getElementById("demo").innerHTML =
parseInt(num,10).toString(2);
}
</script>
</body>
</html>
It's because num doesn't have a value.
Try this:
<p>Convert from Decimal to Binary:</p>
<form method = "post">
<p id = "demo">
<label for="decNum"></label>
<input name="decNum" type="text" id="decNum">
<button onclick="toBinary()">Enter</button>
</p>
</form>
<script>
function toBinary() {
var num = document.getElementById("decNum").value;
document.getElementById("demo").innerHTML =
parseInt(num, 10).toString(2);
}
</script>
There are a few things I would change. First off, I would keep non form elements outside of the form. The major issue is that num doesn't have a value, but to ensure it works you will also want to take the event and use event.preventDefault() to make sure it doesn't submit the form. Try:
<!DOCTYPE html>
<html>
<body>
<p>Convert from Decimal to Binary:</p>
<form method="post">
<label for="decNum"></label>
<input id="field" name="decNum" type="text">
<button onclick="toBinary(event)">Enter</button>
</form>
<p id="demo"></p>
<script>
function toBinary(event) {
event.preventDefault();
var value = document.getElementById('field').value;
document.getElementById("demo").innerHTML =
parseInt(Number(value), 10).toString(2);
}
</script>
</body>
</html>
You're not defining num.
Grab it from the input as such:
function toBinary() {
const num = document.getElementById("textInput").value;
document.getElementById("demo").innerHTML = parseInt(Number(num),10).toString(2);
}
<p id = "demo"></p>
<label for="decNum"></label>
<input name="decNum" type="text" id="textInput">
<button onclick="toBinary()">Enter</button>

HTML input into Javascript variable

I've been attempting to grab text input from HTML and trying to output the text back into HTML but for some reason it does not seem to be working. Does putting input within a form alter the interaction with getElementById or is it possible that the second button usage of formaction is interrupting this?
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput");
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
EDIT: I have attempted to change
var test = document.getElementById("searchInput");
to
var test = document.getElementById("searchInput").value;
previously and it is still not working. Is there an interaction that is failing that I am missing? Also I would like to be able to store the input as variable i.e thats why I am purposely putting it into a variable before outputting it.
EDIT2: There wasn't anything particularly wrong about the code other than retrieving the value. I am currently using codepen.io to code and did not load jquery into the pen.
Since you're using jQuery, it will make more sense to use jQuery to obtain the elements' value:
Use this to always replace #text element contents with #searchInput value:
$("#text").html($("#searchInput").val());
Use this to append #searchInput value to #text element:
$("#text").append($("#searchInput").val());
But the whole logic does not make any sense. You are changing an elements' value that it is outside the form you are submitting. Either you should prevent submit button click event from submitting the form, or have the #text element inside the form as an input, textarea or hidden field:
$(document).ready(function(){
$("#submit").on("click",function(e) {
e.preventDefault();
$("#text").html($("#searchInput").val());
})
});
or having the #text element inside the form for submitting:
<form>
<input type="hidden" id="text" name="text">
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
You Using form element, so once you click the button , the form will be reloaded, if you want to display textbox value to the element , once remove the form element.
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
<div id ="text">
<h1 id="welc"></h1>
</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $('#searchInput').val();
$("h1").html(test);
});
});
</script>
Just Remove tag, and check it.
You need to find the element's value and then set it as HTML.
$("#text").html(test.value);
I have updated your question mate check this one .
$(document).ready(function(){
$("#submit").on("click",function(){
var test = document.getElementById("searchInput").value;
$("#text").html(test);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type ="text" id ="searchInput"><br>
<button id = "submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id = "text">
<h1>test</h1>
</div>
I think this will work for you.
<! doctype HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<input type="text" id="searchInput">
<br>
<button type="button" id="submit">Search</button>
<button formaction="https://en.wikipedia.org/wiki/Special:Random" formtarget="_Blank">Random</button>
</form>
<div id="text">
<h1>test</h1>
</div>
</body>
<script>
$(document).ready(function () {
$("#submit").on("click", function () {
$("#text").html($("#searchInput").val());
})
});
</script>
</html>
Edit your JS code please try:
EDIT:
$(document).ready(function(){
$("#submit").on("click",function(){
var test = $("#searchInput").val();
$("#text").html(test);
})
});

Populating Textbox on website using javascript

I am working on a project that i would need to populate textbox's inside of BMC Web Remedy with information with JavaScript/HTA File. -- Essentially I just need to Push text into textbox's on the site
I can't seem to figure out how to populate the information onto the page itself though, was wondering if I could get some guidance of if this is possible/how i would go about doing this, or just pointed in the right direction.
Just to clarify as an example on the web site:
http://www.brivers.com/resume/scripts/tutorial-hta-textbox.php
Having data push into the name/address/city field
Something like this only I'm not sure how to push it to the website field itself
**sorry just to clarify the field I am wanting to push this to is external of the application, is there a way to push this to a text field on (literally any) website? for example a username/password textbox on any site
<script language="javascript" type="text/javascript">
function PushData_NSO(){
var userinput = txtPhoneNum.value;
document.getElementById('txtName').value = userinput;
}
</script>
<body>
<p> <input id="txtPhoneNum" type="text" value=""> </p>
<p> <input type="button" onclick="PushData_NSO()"> </p>
</body>
You're trying to do getElementById('txtName') where the html is <input id="txtPhoneNum" />. This will never work because the id isn't the same as the one you're trying to access.
For errors like this, you could use the developer tools (Chrome, IE, Firefox shortcut F12) to see if there are errors in the console.
Furthermore the variable txtPhoneNum isn't defined. If you'd want it to be the input-element you should first do txtPhoneNum = document.getElementById('txtPhoneNum').
I've created a plunker to illustrate.
Get the data from HTML like this,
var userinput = document.getElementById('txtPhoneNum').value;
// do something with userinput
To display data in HTML you should use,
document.getElementById("whateverID").innerHTML = "changed user input";
try this:
<script type="text/javascript">
function PushData_NSO(){
var userinput = document.getElementById('txtPhoneNum').value;
document.getElementById('txtName').value = userinput;
}
</script>
<body>
<p> <input id="txtPhoneNum" type="text" value=""> </p>
<input type="text" id="txtName" value="" />
<input type="button" onclick="PushData_NSO()" value="push "/>
</body>
When you use getElementById('ValueOfID'), the javascript searches all the elements in the html where the id attribute is the same value as "ValueOfID" (in this case).
The .value after getElementById means you are going to do something with that value, in this case you change it to whatever is in the "userinput" variable.
So in your case you need to do:
<script language="javascript" type="text/javascript">
function PushData_NSO(){
var userinput = txtPhoneNum.value;
document.getElementById('txtPhoneNum').value = userinput;
}
</script>
Please try this:
<script language="javascript" type="text/javascript">
function PushData_NSO(){
//First get the value or text, for an instance, just say "sampleText".
var userinput = document.getElementById('txtPhoneNum').value;
//Secondly get the id of the textbox and using that append the value to that textbox.
document.getElementById('txtName').value = userinput;
}
</script>
I think this is what your after
<form>
<input id="txtPhoneNum" type="text" value=""/>
<input type="button" onclick="PushData_NSO()" value="Add Number to Div"/>
</form>
<br/>
<div id="txt">The number will replace this text</div>
<script>
function PushData_NSO(){
var userinput = document.getElementById('txtPhoneNum').value
document.getElementById('txt').innerHTML = userinput;
}
</script>
Here is a JSFIDDLE showing it in action, if you have any questions about this feel free to ask

innerHTML not displaying text

Please excuse my basic query to javascript and html
I am new to javascript and html. I am trying to work with javascript on click and few other things. In below code, am trying to display a text on "onclick" function. I am using an external javascript.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" >
<script type="text/javascript" src="/home/roger/Documents/html/myScript.js"></script>
</head>
<body>
<form>
First Name: <input type="text" name="first" id="names"/><br>
Phone Number: <input type="number" name="numb" id="numb"/><br>
<button type="button" onclick="verifyText()">Click Me!</button>
</form>
</body>
</html>
Below is my code in myScript.js
function verifyText(){
document.getElementById("names").innerHTML = "Why not displaying?.";
}
If I put alert in function, pop comes out, but I am unable to figure why innerHTML is not working. Any help will be highly appreciated. Thanks.
You need to set the value, because names is an input field.
document.getElementById("names").value = "Why not displaying?.";
See: http://jsfiddle.net/zrmrx/
names is an <input>. You need to set its value, instead of innerHTML. Try this:
function verifyText(){
document.getElementById("names").value = "Must display now!";
}
Use the javascript element.setAttribute('[attr]','string') to save the user input values or input checkbox checks as part of the document innerHTML. The reset() function changes the form input back to its current Attribute setting. Javascript can dynamically change the default input value with the setAttribute therefore, change the user input default value when reset() is clicked or your code reloads it as part of a saved innerHTML.
function update_attribute() {
var obj = document.getElementById('demo');
if (obj.type == 'checkbox') {
if (obj.checked == true) {
obj.setAttribute('checked', 'checked');
} else {
obj.removeAttribute('checked');
}
}
if (obj.type == 'text') {
obj.setAttribute('value', obj.value);
}
}
<form id='myform'>
<label>Text Input</label><br>
<input type='text' id='demo'>
<br>
<br>
<button type='button' onclick='update_attribute(this)'>Change Attribute</button>
<button type='reset'>RESET</button>
</form>

how to get a random user input variable to return in html

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.

Categories

Resources