JavaScript with HTML DOM doesn't work - javascript

My JavaScript function date(id) is supposed to display the current date by accessing an element passed in the function call. The problem is it doesn't work and I can't understand why. Can anyone help me?
Here is my code:
<script type = "text/javascript">
function date(id)
{
document.getElementById(id).innerHTML = Date();
}
</script>
in the HTML:
<p style = "text-align:center;" id = "datep">
</p>
<input type = "button" onclick = "date(datep)" value = "Display date" />

In your input tag you have the id passing to your function. Your id is a string and since it is you need to put quotes around it.
It should look like this...
<input type="button" onclick="date('datep')" value="Display date" />

Related

Assign dynamic value to an Input Field in HTML

I have an input field and I want to assign it a value dynamically fetched from DB. I will use that value later in a script. Here is my code below
<div data-ng-model="DashboardCounterItems">
<div data-ng-repeat="cItem in DashboardCounterItems">
<input type ="hidden" id ="myInput" value = {{cItem.dbMeetings.length}} />
</div>
</div>
Here {{cItem.dbMeetings.length}} is fetched from DB and assigned to myInput. Further when I check the value of this input in alert in script below, I get {{cItem.dbMeetings.length}} message instead of the value within it.
<script>
var iLenthv = document.getElementById("myInput").value;
alert(iLenthv);
</script>
Any help how can I do it. Or any other better way. I will really appreciate it.
I think your JS code will execute before DB data retrieval, can you check JS code within the setTimeout() Method?
<script>
setTimeout(function() {
var iLenthv = document.getElementById("myInput").getAttribute("value");
alert(iLenthv);
}, 3000);
</script>
Use .getAttribute() to get the value from a html attribute
function myFunction() {
var iLenthv = document.getElementById("myInput").getAttribute("value");
alert(iLenthv);
}
Hope it's helpfull
So we have to track the client side actual value, after the document is loaded. Would you adapt this piece of code and take a look at the console ?
<div data-ng-model="DashboardCounterItems">
<div data-ng-repeat="cItem in DashboardCounterItems">
<input type="hidden" id="myInput" value={{cItem.dbMeetings.length}} />
</div>
</div>
<script>
const test = () => {
var iLenthv = document.getElementById("myInput").value;
console.log("value:",iLenthv);
};
window.onload = test;
</script>

Passing on a variable to a JS function from HTML

I'm currently working on a little programming task for school. I chose the task because I had an idea how to get the core of the program running in Java, but I'm having issues translating this into a very simple web page, no experience with HTML or JS.
My issue is: I'm receiving input via a button. When clicked, a function is called and that function gets the value of the input. However, all I get as the alert window is objectHTMLinputElement. What am I doing wrong?
function myRT() {
var risikoTraeger=document.getElementById('input1').value;
}
function myRH() {
var risikoHoehe = parseInt(document.getElementById('input2')).value;
alert(input2);
}
<h1>Siemens: Risikoassessment</h1>
<p id="demo">How many entries?</p>
<input type="text" id="input1" />
<button type="button" onclick="myRT()">Risk carrier</button>
<input type="text" id="input2" />
<button type="button" onclick="myRH()">Sum of the risk</button>
Get the value of the input before parsing it. Plus, you are alerting an input element instead of the variable that you are setting the value to. Use:
function myRH(){
var risikoHoehe = parseInt(document.getElementById('input2').value);
alert(risikoHoehe);
}
Change this part parseInt(document.getElementById('input2')).value; as :
parseInt(document.getElementById('input2').value)
You're calling the wrong variable, try 'risikoHoehe' instead of 'input2':
function myRT() {
var risikoTraeger=document.getElementById('input1').value;
}
function myRH(){
var risikoHoehe = document.getElementById('input2').value;
alert(risikoHoehe);
}
1) You are trying to parse a DOM element to an int so it returns undefined.
Use document.getElementById('input2').value.
2) Use parseInt only if needed, if its just for alerting then you can skip it
3) You cannot directly refer to an dom element by id, you have to get that element in a variable and then use it.
alert(input2); should be alert(risikoHoehe);
Well, Here is the complete working code-
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myRT() {
var risikoTraeger=document.getElementById('input1').value;
alert(risikoTraeger);
}
function myRH(){
var risikoHoehe = parseInt(document.getElementById('input2').value);
alert(risikoHoehe);
}
</script>
</head>
<body>
<h1>Siemens: Risikoassessment</h1>
<p id="demo">How many entries?</p>
<input type="text" id="input1" />
<button type="button" onclick="myRT()">Risk carrier</button>
</br>
<input type="text" id="input2" />
<button type="button" onclick="myRH()">Sum of the risk</button>
</body>
</html>
Hoping this will help you :)
Let's see what you are doing wrong:
var risikoHoehe = parseInt(document.getElementById('input2')).value;
document
document itself
getElementById()
the function which gives us the element that has the specific ID parameter
'input2'
the ID of the desired input
.value
the element's value if it has any.
parseInt()
the function that converts any string to it's integer value.
now look at here:
document.getElementById('input2') => the input element itself (objectHTMLInputElement)
parseInt(objectHTMLInputElement) => what can we get if we try to convert the html input element to an integer?
(integer).value => does integers have value property?
But if you write it like this:
var risikoHoehe = parseInt(document.getElementById('input2').value);
document.getElementById('input2') => the input element itself (objectHTMLInputElement)
objectHTMLInputElement.value => the value of the input as string
parseInt(string) => Parse the integer value of the string

Javascript won't get value from textbox issue, why not?

I have this code:
<script>
function getAge() {
var birthdate = document.getElementById("birthdatebox").value;
document.getElementById("agecomputed").innerHTML = calculateAge2(birthdate);
}
</script>
and
<input type="text" name="birthdatebox" />
<button onclick="getAge()" name="birthdatebutton">Get Your Age</button>
<div id="agecomputed"></div>
It should return the calculated value. Nothing happens. Just doesn't work.
Please help.
UPDATE:
I have a reference to the js file, which contains the calculateAge2 function and it does work when I pass a number directly instead of birthdate variable.
You need to add the id attribute to your <input> element, like this...
<input type="text" name="birthdatebox" id="birthdatebox" />

Javascript to html tag ~ passing a variable

So my question is, how do I pass variables to javascript functions through html input boxes?
Like, let's say I have a function:
function Call(number, text, callerID, CallerIDName, PassCode)
How would I make an input box in html so that when the user submits a value into the box, it would set the variable for that corresponding box?
All help is appreciated, thanks!
Try something like this...
Name: <input type="text" id="number"><br>
Text: <input type="text" id="text"><br>
Caller Id Name: <input type="text" id="CallerIDName"><br>
Passcode: <input type="text" id="Passcode"><br>
<script>
function Call() {
var number = document.getElementById("number").value;
var text = document.getElementById("text").value;
var CallerIDName = document.getElementById("CallerIDName").value;
var Passcode = document.getElementById("Passcode").value;
//do something here...
}
</script>
<button onclick="Call();">Click to Call</button>
Let's say you have an input tag for the "number" parameter:
<input type="text" id="number" />
You can then obtain the value of the field like this;
document.getElementById("number").value
You can find a few examples here. Let me know if I misunderstood your question.

How to get text from textfield and pass it as a parameter to a javascript function

I have a textfield which is supposed to change an element on the page with the text inside it when a submit button is pressed. I am passing the value to a javascript function. It doesn't work, can anyone tell me how to do it/what i'm doing wrong?
Here is my code:
<html>
<head>
<script type = "text/javascript">
function submitText(string, id)
{
document.getElementById(id).innerHTML = string;
}
</script>
</head>
<body>
<p id = "Datepara" style = "font-family:comic sans ms;color:orange;text-align:center;font-size:25px;">
Date Created: 24/9/12 <br /><br /><br/>
</p>
<input id = "changetext" type = "text" value = "Enter text to display text in this webpage!"/>
<input id = "submit" type = "button" onclick = "submitText('Datepara','document.getElementById("changetext").value;'" value = "Submit" />
</body>
</html>
do this
<input id = "submit" type = "button" onclick = "submitText('Datepara','changetext')" value = "Submit" />
javascript
function submitText(divid,txtid)
{
document.getElementById(divid).innerHTML = document.getElementById(txtid).value;
}
This is what I changed on your code: I switched the order of your parameters on submitText function, I removed the quotes around document.getElementById("changetext").value since you were passing a string and not the value of the input control
function submitText(id, string)
{
document.getElementById(id).innerHTML = string;
}
<input id="submit" type="button"
onclick="submitText('Datepara', document.getElementById('changetext').value)"
value="Submit" />
'document.getElementById("changetext").value;' is a string literal, not the value property of a gEBId call.
"submitText('Datepara','document.getElementById(" is the value of the onclick attribute. Watch your quotes.
submitText(string, id) takes a string then an id, not an id then a string.

Categories