Here is my code just began learning so dont know what am i doing wrong. Help!!
<html>
<head>
</head>
<body>
<input type = "text" placeholder = "Number One" id = "one"></input><br>
<input type = "text" placeholder = "Number Two" id = "two"></input><br>
<button onclick = "test()">Click Me</button><br>
<script>
function test()
{
document.getElementById("one").value;
}
</script>
</body>
</html>
Here shows that its working. All you have to do is assing a function to show the value.
JS
function test()
{
var x = document.getElementById("one").value;
alert(x);
}
Look at your html, it should be
<input type = "text" placeholder = "Number One" id = "one"/><br />
<input type = "text" placeholder = "Number Two" id = "two"/><br />
You can put an alert, or console.log in your script tag to know if its being hit e.g.
<script>
function test() {
alert('function called');
document.getElementById("one").value;
}
</script>
Thanks.
Related
How can I add JavaScript to a single button as to copy text to the clipboard from multiple HTML inputareas including fixed text, while inserting a line break between each field?
To give you a better idea, it's simply a webpage that will allow us at work to take very repetitive notes that we always write (same points) made of 10 points, and with a click it'll copy the fields and the text that refers to the input in a form that is ready to be pasted anywhere.
<!DOCTYPE html>
<head>
<title>Repeater</title>
</head>
<body>
<button id = "button" onclick = "myFunction()">CLICK ME!</button>
<input class = "text" name = "text" type = "text" id = "textone">
<input class = "text" name = "textone" type = "text" id = "texttwo">
<input class = "text" name = "texttwo" type = "text" id = "textthree">
<input class = "text" name = "textthree" type = "text" id = "textfour">
<input class = "text" name = "textfour" type = "text" id = "textfive">
<script>
var total;
function myFunction(){
var inputarray = document.getElementByClass("text);
for(var i = 0;i < inputarray.length; i++){\
var now = inputarray[i].value;
total = total + now;
total = tatal + "____________________________________________________________________________"
}
total.select();
document.execCommand("Copy");
}
</script>
</body>
</html>
Try this
My code has two sections: a section to input new items, and a section to interact with them. I'm trying to update the dropdown list every time a new item is added with jQuery, but my current method does nothing. By nothing, I mean that the dropdown list would remain empty. I've tried previous answers to this question, but none worked. (I'm pretty new to Javascript, so me just being a noob is completely possible).
Here's the html:
<!DOCTYPE html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "deletion.css"></link>
<script src = 'chemical.js'></script>
</head>
<body>
<form id = "newChemicalForm">
<p id = newChemicalText> Submit new chemicals here: </p>
<input type = "text" id = "newChemicalInput" onfocus = "this.select()" placeholder = "Enter new chemical here"/>
<button id = "newChemicalButton" onclick = "addChemical()" > Submit </button>
</form>
<form id = "newUsageForm">
<p id= "newUsageText"> Name your chemical and a usage amount. Check if the usage is daily. </p>
<select id = "chemicalDropdown">
</select>
<input type = "text" id = "newUsage" placeholder = "Ex: 250"/>
<input type = "checkbox" id = 'dailyCheckbox'/>
<p id = "dateText"> Enter the end date below: </p>
<input type = "date" id = "dateInput"/>
<button id = "newUsageButton" onclick = "addUsage()"> Submit </button>
</form>
</body>
And the Javascript:
chemicals = [];
function addChemical() {
var chemical = new Chemical();
chemicals.push(chemical);
$('#chemicalDropdown').append('<option value = "' + chemical.name + '"> ' + chemical.name + '</option> \n');
}
function Chemical() {
this.name = $('#newChemicalInput').val();
this.amount = 0;
this.usages = [];
}
There are a couple of things going on. First of all, When you press the submit button it tries to submit the first form. Second: It seems like the onclick event is not binding to the method which should add the item to the dropdownlist.
I've updated a couple of things:
Added $(document).ready(...); as it is best practice.
I've removed the inline onclick and bind the click event via jQuery.
JSFiddle here...
<form id = "newChemicalForm">
<p id = newChemicalText> Submit new chemicals here: </p>
<input type = "text" id = "newChemicalInput" onfocus = "this.select()" placeholder = "Enter new chemical here"/>
<button type="button" id = "newChemicalButton" > Submit </button>
</form>
<form id = "newUsageForm">
<p id= "newUsageText"> Name your chemical and a usage amount. Check if the usage is daily. </p>
<select id = "chemicalDropdown">
</select>
<input type = "text" id = "newUsage" placeholder = "Ex: 250"/>
<input type = "checkbox" id = 'dailyCheckbox'/>
<p id = "dateText"> Enter the end date below: </p>
<input type = "date" id = "dateInput"/>
<button id = "newUsageButton" onclick = "addUsage()"> Submit </button>
</form>
and the JS:
$(document).ready(function(){
var chemicals = [];
$("#newChemicalButton").on("click",function(){
addChemical();
});
function addChemical() {
var chemical = new Chemical();
chemicals.push(chemical);
$('#chemicalDropdown').append("<option value=" + chemical.name + ">" + chemical.name + "</option>");
}
function Chemical() {
this.name = $('#newChemicalInput').val();
this.amount = 0;
this.usages = [];
}
});
Possible the "\n" behind the append code make this not working. Try to remove it.
How do I replace output text in html5.
For example, user Input this text: My name is Toni.
I want to replace the output text: "Toni" to Ani, for example, output, become: "My name is Ani".
This is my code:
<title>textBoxes.html</title>
<script type = "text/javascript">
// from textBoxes.html
function repleace(){
var txtName = document.getElementById("txtName");
var txtOutput = document.getElementById("txtOutput");
var name = txtName.value;
if(name == "toni"){
name = "ani";
}
txtOutput.value = name;
}
</script>
<link rel = "stylesheet"
type = "text/css"
href = "textBoxes.css" />
</head>
<body>
<h1>Text Box Input and Output</h1>
<form action = "">
<fieldset>
<label>Type your name: </label>
<input type = "text"
id = "txtName" />
<input type = "button"
value = "GO"
onclick = "repleace()"/>
<input type = "text"
id = "txtOutput" />
</fieldset>
</form>
</body>
</html>
this code just Replace text when I input text: Toni, but when I input: My name is Toni. Cant replace text, Toni.
Use Replace function.
name.replace("toni", "Ani");
Have a look at the Javascript build in function replace:
http://www.w3schools.com/jsref/jsref_replace.asp
This will search the string and only replace the matching part with the new one.
Explanation why you code is not working:
You are checking if the textbox value is equal to toni and if so replace the whole string with ani.
When i click on the button, nothing happens. Firebug says that "TypeError: btnNew is null"
My Javascript code is:
function addNewItem(){
alert("Test")
};
var btnNew = document.getElementById("btnAdd");
btnNew.onclick = addNewItem;
And the html is:
<input type = "text" id = "input">
<button id = "btnAdd">New item</button>
How come btnNew is null if its value is document.getElementById("btnAdd") ?
function addNewItem(){
alert("Test")
}
window.onload = function() {
var btnNew = document.getElementById("btnAdd");
btnNew.onclick = addNewItem;
}
<input type = "text" id = "input">
<button id = "btnAdd">New item</button>
You have to execute your js code after the document is loaded.
In window.onload or $document.ready() if you use jquery.
See window.onload vs $(document).ready() for differences.
you could use body onload event
see the code bellow
<!DOCTYPE html>
<html>
<body onload="myFunction()">
<input type = "text" id = "input">
<button id = "btnAdd">New item</button>
<script>
function myFunction() {
function addNewItem(){
alert("Test")
};
var btnNew = document.getElementById("btnAdd");
btnNew.onclick = addNewItem;
}
</script>
</body>
</html>
I am trying to make a web app that works as flash cards but I need to be able to take what the user types into a textbook and add it to the page. Here is what I have found but I want the text to be embedded.
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>textBoxes.html</title>
<script type = "text/javascript">
// from textBoxes.html
function sayHi(){
var txtName = document.getElementById("txtName");
var txtOutput = document.getElementById("txtOutput");
var name = txtName.value;
txtOutput.value = "Hi there, " + name + "!"
} // end sayHi
</script>
<link rel = "stylesheet"
type = "text/css"
href = "textBoxes.css" />
</head>
<body>
<h1>Text Box Input and Output</h1>
<form action = "">
<fieldset>
<label>Type your name: </label>
<input type = "text"
id = "txtName" />
<input type = "button"
value = "click me"
onclick = "sayHi()"/>
<input type = "text"
id = "txtOutput" />
</fieldset>
</form>
</body>
</html>
Check out AngularJS. It can do what you want. And so much more!
var app = angular.module('app', []);
app.controller('AppCtrl', function($scope) {
$scope.name = "";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
<input type "text" placeholder="Enter your name" ng-model="name" />
<h3>Hello<span ng-show="name">, </span>{{name}}!</h3>
</div>
Edit: You can also use JQuery: Here's a fiddle
If you don't want to use Angular, this works:
function writeToElement(id, value){
var target= document.getElementById("id");
if (target) {
target.innerHTML = value;
return target;
} else {
return false;
}
}
Then you can set an onClick to writeToElement(someId, this.value) where someId is the id of the element you want to change.