Passing on a variable to a JS function from HTML - javascript

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

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>

Changing value of input text after button click using javascript's addeventlistener

I am trying to have the input text that was entered via a text field form change on button click using JavaScript. I'm having difficulty figuring out why it is not working. Any help would be appreciated.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<script type="text/javascript">
function start(){
var button = document.getElementById("button");
button.addEventListener("click", buttonPressed, false);
}
function buttonPressed(){
var text = document.getElementById("textField").value;
text.value = "GMU";
}
window.addEventListener("load", start, false);
</script>
</head>
<body>
<form>
<input id="textField" type="text" value="">
<input id="button" type="button" value="Button">
</form>
</body>
</html>
The problem lies here:
var text = document.getElementById("textField").value;
text.value = "GMU";
Take a look at the lines above. You are getting the value of an element and storing it into text but you then try to assign text.value? Consider this situation:
Say that the input currently has a value of "Apples". Doing:
var text = document.getElementById("textField").value;
Will store "Apples" in text. Now you do:
text.value = "GMU";
Since text is a string, and you try to access property value which does not exist for strings, it doesn't work - you've access the value property one too many times.
Now - note that the variable stores the value not reference to the element's value, meaning that in your code above, text only holds the property value, it's not pointing to the actual element's value property. Thus you would need to directly modify the value property like so:
document.getElementById("textField").value = "GMU";
This works because you modify the property of the element itself, you don't copy it into a variable.
You can alternatively store the element into a variable, and do element.value = "val" because an element is an object, and objects have references that point to memory, so when you assign to an object, reference is assigned and it points to the same place in memory.
To change the input text on button click you can use addEventListener just on the button. Then you can change the input field after that.
var button = document.getElementById("button");
var text = document.getElementById("textField");
button.addEventListener('click', function() {
text.value = "GMU";
});
<form>
<input id="textField" type="text" value="">
<input id="button" type="button" value="Button">
</form>

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

can i change html content using innerhtml in javascript without using a function?

The most basic example, where say I got a variable called name. What I want to do is to put the value of my tag paragraph to the name variable.
That is, I want the value of name change in html as soon as it is changed in JavaScript.
Btw, I created a refresh name method, which works perfectly, but I need a better alternative.
<html>
<head></head>
<body>
<script>
var droid = new Android();
var name = "Player";
function getName() {
name = prompt("Enter Name");
}
function putName() {
var elm = document.getElementById("ntag");
elm.innerHTML = name;
}
</script>
<p id="ntag"></p>
<input type="button" onclick="putName();" value="Refresh Name"/>
<input type="button" onclick="getName();" value="Change Name"/>
<br>
<input type="button" onclick="droid.dismiss();" value="Exit"/>
</body>
</html>
As I understand from you question, you want to minimize the number of buttons and event-handlers.
You are currently using two buttons to prompt for input and change the content. You can get rid of your putName function and the associated button for that and change the content within the first one itself.
You should ideally use innerText instead of innerHTML in this case.
You code will somewhat look like this snippet:
Snippet:
function getName() {
name = prompt("Enter Name");
document.getElementById("ntag").innerText = name;
}
<p id="ntag"></p>
<input type="button" onclick="getName();" value="Change Name"/>

JavaScript with HTML DOM doesn't work

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

Categories