How do I grab a value from an input in javascript? - javascript

how do i grab a value from an input element in javascript? For some reason my code is not executing. This is my HTML code:
<section id ="my-life" style="margin-left:39em;">
<input class="jenny" placeholder="Your First Name"/> <br /><br />
<button id="get">Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
This is my javascript code:
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello" + Niche[0].value;
}

function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello " + Niche[0].value;
}
<input class="jenny" placeholder="Your First Name"/>
<br /><br />
<button onclick='buttonClicked();'>Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>

<section id ="my-life" style="margin-left:39em;">
<input class="jenny" placeholder="Your First Name"/> <br /><br />
<button id="get">Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
<script>
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello" + Niche[0].value;
}
document.getElementById('get').onclick = buttonClicked;
</script>

I tried your code on the editor. It works fine. But you must include your JS code inside a <script> element. And put it in the bottom of the document.
function buttonClicked() {
var Niche = document.getElementsByClassName("jenny");
var results = document.getElementById("whitelion");
results.innerHTML = "Hello " + Niche[0].value;
}
<section id ="my-life">
<input class="jenny" placeholder="Your First Name"/> <br /><br />
<button id="get" onclick="buttonClicked()">Subscribe</button>
<br /><br />
<div id ="whitelion">Thank You!</div>
<br/>
</section>

Related

how to count number of replaced strings in javascript

How do I properly count the amount of replaced strings in Javascript. my increment function is in the replacement part of replace function bellow gives me a "0". i am not sure if the problem lies with the function or the way i called it. thanks in advance
<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br/><br/>
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br/><br/>
Replace:<br />
<input type="text" id="replace" name="replace"size="30"><br />
<br/><br/>
<button onclick="newrep()">Find and Replace</button>
<br/><br/>
</main>
<script>
function newrep(){
let temp= document.getElementById("message").value;
var fid = document.getElementById('find').value;
var regexp=new RegExp(fid, "gi");
var rv = document.getElementById('replace').value;
var inp=document.getElementById('message').value;
var count=0;
let str2=(inp.replace(regexp,rv,function(x){count+=1;return"1"}))
document.getElementById("message").value = str2;
document.getElementById("ChCtr").innerHTML = count;
}
</script>
</body>
</html>
you are using replace function in wrong way . there is only two arguments allowed for this
one = search term
two = string or function
if you are using function for replace value then you have to return whatever value you wanted to replace into that function and thats it
function newrep(){
let temp= document.getElementById("message").value;
var fid = document.getElementById('find').value;
var regexp=new RegExp(fid, "gi");
var rv = document.getElementById('replace').value;
var inp=document.getElementById('message').value;
var count=0;
let str2=inp.replace(regexp,x => {
count++;
return rv;
})
document.getElementById("message").value = str2;
document.getElementById("ChCtr").innerHTML = count;
}
<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br/><br/>
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br/><br/>
Replace:<br />
<input type="text" id="replace" name="replace"size="30"><br />
<br/><br/>
<button onclick="newrep()">Find and Replace</button>
<br/><br/>
</main>
</body>
</html>
This will work for you. Cheers :)
function newrep() {
let temp = document.getElementById("message").value;
var fid = document.getElementById("find").value;
var regexp = new RegExp(fid, "gi");
var rv = document.getElementById("replace").value;
var inp = document.getElementById("message").value;
var count = 0;
// Additional condition, when find is empty
if (!fid) {
document.getElementById("ChCtr").innerHTML = count;
return;
}
// corrected your useage of replace function
let str2 = inp.replace(regexp, function () {
count += 1;
return rv;
});
update(str2, count);
}
function update(msg, count) {
document.getElementById("message").value = msg;
document.getElementById("ChCtr").innerHTML = count;
}
<!DOCTYPE html>
<html lang="en">
<body>
<main>
Message:<br />
<textarea id="message" name="message" rows="3" cols="20">Hello 202204</textarea>
<span id="ChCtr"></span>
<br /><br />
Find:<br />
<input type="text" id="find" name="find" size="30"><br />
<br /><br />
Replace:<br />
<input type="text" id="replace" name="replace" size="30"><br />
<br /><br />
<button onclick="newrep()">Find and Replace</button>
<br /><br />
</main>
</body>
</html>

Pull value from HTML field and put into variable using get.element

How would i pull the user field info from the fields and store in a variable?
I need it to then output that information into a div, its for an employee records database kind of thing.
<!DOCTYPE html>
<html>
<head>
<title>52DA session 5</title>
<meta charset="utf-8" />
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/employee_styles.css"/>
</head>
<body>
<div id="container">
<header>
<h1 id="heading" class="blueTxt">Employee Records</h1>
</header>
<div class="left">
<form>
<fieldset>
<legend><h2>Employee Details Entry</h2></legend>
<p class=><label>Name: <input class="text" type="text" id="name" /></label></p>
<p><label>Age: <input class="text" type="text" id="age" /></label></p>
<p><label>Position: <input class="text" type="text" id="position" /></label></p>
<p><label>Details: <textarea type="text" id="details" maxlength="114" ></textarea></label></p>
<input class="button" type="button" id="addRecord" onclick="" value="Add Record"/>
</fieldset>
</form>
<div class="sort">
<h3>Sort</h3>
<button class="button" id="sortByName">By Name</button>
<button class="button" id="sortByAge">By Age</button>
<br/><button class="button" id="reset">Reset Details</button>
<br /><br />
</div>
</div>
<section>
<div id="employeeRecords">
</div>
</section>
</div>
<script src="../js/employee_script.js"></script>
</body>
</html>
heres my empty js
var employees = [];
//--------------------------------------------------------------------------------------------------------------
function Person(name, age, pos, dtls, img){
this.fullName = name;
this.employeeAge = age;
this.position = pos;
this.details = dtls;
this.avatarSrc = img;
this.createProfile = function(){
var profile = document.createElement("div");
profile.className = "profileStyle";
var avatar = document.createElement("img");
avatar.src = this.avatarSrc;
avatar.alt = this.fullName();
profile.appendChild(avatar);
var profileTxt = document.createElement("p");
profileTxt.innerHTML = "<b>" + this.fullName() +
"</b><br />" + this.age +
"</b><br />" + this.pos +
"</b><br />" + this.dtls;
profile.appendChild(profileTxt);
return profile;
}
employees.push(this);
please make it as simple as possible
cheers! any help will be appreciated!
Im fairly new to js and coding in general.
For getting values from HTML form fields from where you want to get value
var x = document.getElementById("myText").value;
and you can set it as where you want to set
document.getElementById("result").value = x;
I agree with #Rao and you can read this post that talk about how to get input field...
How do I get the value of text input field using JavaScript?
You can read from mozilla site
https://developer.mozilla.org/it/docs/Web/JavaScript/Guida
And w3schools...
https://www.w3schools.com/js/

Why it is not printing the character in a paragraph?

Write a script that inputs an integer code for a character and displays the corresponding character.
It should print in a paragraph.
function character() {
var input = document.getElementById( "input" );
var code = document.getElementById( "output" ).innerHTML = input;
output.value = String.fromCharCode( code );
}
<input id="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" ></p>
A P is not a form element. Also if you use form.fieldName, you need to use name="" instead of id=""; otherwise use document.getElementById for all fields and ignore the form.
You need to use innerHTML or innerText/textContent for a paragraph
document.getElementById("output").innerHTML=...
function character() {
var form = document.getElementById("form");
var code = parseInt(form.input.value,10); // radix 10 to make decimal
document.getElementById("output").innerHTML = String.fromCharCode(code);
}
<form id="form">
<input name="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" ></p>
</form>
You have the problem for access to the elements inside a form.
document.getElementById("form").elements['input']
But this only works with form elements, not with other HTML elements.
In this of elements, you can use id or name but for historical reasons.
You have another way here:
function character() {
var input = document.getElementById("input"),
output = document.getElementById("output");
output.innerHTML = String.fromCharCode(parseInt(input.value), 10) || '';
}
<form id="form">
<input id="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" ></p>
</form>
Here, this works:
<script>
function character() {
var ChrCode = document.getElementById("input").value;
document.getElementById("output").innerText = ChrCode + " = " + String.fromCharCode(ChrCode);
//output.value = String.fromCharCode( code );
}
</script>
<input id="input" type="text" size="10">
<br>
<input type="button" value="click here" onclick="character()" id="button">
<br>
<p id="output" >Output</p>

Reference Textarea W/ Input

I am looking to build a simple webpage that can check to see if a string contains certain information. I'm taking a summer course in Java and wanted to give Javascript a try. Maybe a bad idea?
I want the user to enter information - name, phone number, and a couple other options in a form. Then I want the user to enter more information in the text area. The text area will reference the input data and if there is a match it will alert the user.
I have limited javascript experience, but I've been able to manipulate user input with javascript in the past.
Not sure what my problem here is. Any tips (especially regarding style and logic) are greatly appreciated! PS - I'm using Bootstrap if that matters...
Thanks in advance :)
HTML
<div class="container">
<div class="col-md-6">
<form>
<input type="text" id="Name" placeholder="Name" style="width:100%"><br /><br />
<input type="text" id="Number" placeholder="Number" style="width:100%"><br /><br />
<input type="text" id="Next" placeholder="Something Else" style="width:100%"><br /><br />
<input type="text" id="WhatEver" placeholder="Something Else" style="width:100%"><br /><br />
</form>
</div>
<div class="col-md-6">
<textarea id="LongText" placeholder="Enter Info" style="width:100%; height:250px">
</textarea> <br />
<input type="submit" class="btn btn-danger" id="tSubmit" value="Submit" onclick="GetInput();Check();">
</div>
<div class="col-md-12">
<h1>Output</h1>
<div id="tOutPut" style="color:red;"></div>
</div>
</div>
JS
GetInput()
{
var tNameValue = document.getElementById("Name").value;
var tValue = document.getElementById("Number").value;
var tArray = document.getElementById('LongText').value.split('\n');
}
Check( tArray, tNameValue, tValue )
{
for(var i = 0; i < tArray.length; i++ )
{
if( i === tNameVaue )
{
document.getElementById( 'tOutPut' ).innerText = "Name Match" <br />;
}
if( i === tValue )
{
document.getElementById( 'tOutPut' ).innerText = "Match" <br />;
}
}
}
*
Your javascript has many things wrong. Here is the HTML and the Javascript. The logic must be improved but the code is working.
<div class="container">
<div class="col-md-6">
<form>
<input type="text" id="Name" placeholder="Name" style="width:100%"><br /><br />
<input type="text" id="Number" placeholder="Number" style="width:100%"><br /><br />
<input type="text" id="Next" placeholder="Something Else" style="width:100%"><br /><br />
<input type="text" id="WhatEver" placeholder="Something Else" style="width:100%"><br /><br />
</form>
</div>
<div class="col-md-6">
<textarea id="LongText" placeholder="Enter Info" style="width:100%; height:250px">
</textarea> <br />
<input type="submit" class="btn btn-danger" id="tSubmit" value="Submit" onclick="ExecuteAll();">
</div>
<div class="col-md-12">
<h1>Output</h1>
<div id="tOutPut" style="color:red;"></div>
</div>
</div>
And here is the Javascript:
var tNameValue;
var tValue;
var tArray;
function ExecuteAll()
{
GetInput();
Check();
}
function GetInput()
{
tNameValue = document.getElementById("Name").value;
tValue = document.getElementById("Number").value;
tArray = document.getElementById('LongText').value.split('\n');
}
function Check()
{
if (tArray != null) {
for(var i = 0; i < tArray.length; i++ )
{
if( i == tNameValue )
{
document.getElementById( 'tOutPut' ).innerText = "Name Match <br />";
}
if( i == tValue )
{
document.getElementById( 'tOutPut' ).innerText = "Match <br />";
}
}
}
}
I will tell you what I did to fix the bugs:
Added function keyword to the javascript functions.
Put the variables as global so they can be used for the whole code.
Verified whether tArray is not null.
Fixed variable names.
Here is the Fiddle code: http://jsfiddle.net/3U6mE/6/
I hope it helps you get started.

multiple forms with javascript

I am trying to show forms according to user input in the text box but it is showing it one time only...please help...
index.html:
<html>
<head>
<script type="text/javascript" src="demo1.js"></script>
</head>
<body>
<form name="su">
<input type="text" name="tt" onkeyup="javascript:toggleFormVisibility();" id="sub"/> </a>
</form>
<form id="subscribe_frm" style="display:none">
NAME:<input type="text" name="text">
EMAIL:<input type="text" name="text">
PASSWORD:<input type="text" name="text">
</form>
demo.js:
function toggleFormVisibility()
{
var txt = document.getElementById('sub').value;
for(var i=0;i<txt;i++)
{
var frm_element = document.getElementById('subscribe_frm');
var vis = frm_element.style;
vis.display = 'block';
}
}
A bit of a guess, but I think you are trying to create multiple copies of your form. Try this out:
http://jsfiddle.net/QnrM9/
JS
function toggleFormVisibility() {
var txt = document.getElementById('sub').value;
var neededChildren = txt.length - document.getElementById('form_container').children.length + 1;
for (var i = 0; i < neededChildren; i++) {
var frm_element = document.getElementById('subscribe_frm').cloneNode(true);
var vis = frm_element.style;
vis['display'] = 'block';
document.getElementById("form_container").appendChild(frm_element);
}
}
document.getElementById('sub').addEventListener('keyup', toggleFormVisibility);
HTML
<form name="su">
<input type="text" name="tt" id="sub" />
</form>
<div id="form_container">
<form id="subscribe_frm" style="display:none">NAME:
<input type="text" name="text" />EMAIL:
<input type="text" name="text" />PASSWORD:
<input type="text" name="text" />
</form>
</div>

Categories