I want to retrieve the variable x from the function, but this code does not work
who has an idea
thank you
function myFunction(){
var x = document.getElementById("nom").value;
//document.getElementById("demo").innerHTML =x ;
return x;
}
response = myFunction();
document.getElementById("deux").innerHTML =response ;
<form class="form">
<label>Entre ton nom</label>
<input type="text" id="nom" name="Nom" placeholder="Nom" value="" class="form-control">
<input type="button" name="Envoyer" class="btn btn-default" value="Envoyer" onclick="myFunction();">
</form>
<script src="test-envois.js"></script>
<p id="deux"></p>
<p id="demo"></p>
From what can I see in the code is that you want to add the response to the deux id when you click on the button
The problem in that is that response executes the moment you load the page.
You need to add that logic inside the function like this:
function myFunction() {
var x = document.getElementById("nom").value;
//document.getElementById("demo").innerHTML =x ;
// let response = myFunction();
document.getElementById("deux").innerHTML = x;
}
And now it executes when you click the button
If I understand right, you want whatever the user inputs in the form "nom" to be displayed in the paragraph tag "deux"?
if that’s the case you could just do:
function myFunction() {
var x = document.getElementById("nom").value;
document.getElementById("deux").innerHTML = x;
}
you can enclose all the code into one function, no need to separate it
function myFunction(){
var x = document.getElementById("nom").value;
affichepanier(x);
}
function affichepanier(val)
{
var variableOfFunction1 = val;
document.getElementById("deux").innerHTML =variableOfFunction1 ;
}
Related
I have a function that I want to create a new Variable every time it is called. The reason why it needs to be a variable is because I am storing an element reference with it. Arrays cannot store element references that I am aware of. This is my (Simplified for this purpose) code:
function createPara(text) {
let x = document.createElement("p");
x.textContent = text;
document.body.appendChild(x);
}
function submit() {
createPara(document.getElementById("input").value);
document.getElementById("input").value = "";
}
<input id="input" type="text" placeholder="Make new paragraph">
<input type="button" onclick="submit()" value="Submit">
This code works, except after I have made a new paragraph, I can't do anything to the old ones. Like changing the background color. For example,
x.style.backgroundColor = "red";
will only change the newest paragraph. I want to be able to individually change each of them. I think this might be achievable with a for loop, but haven't figured it out yet.
To do this, you can just create an array to save all of the elements.
Like this:
let array = [];
function createPara(text) {
let x = document.createElement("p");
x.textContent = text;
array.push(x);
document.body.appendChild(x);
}
function change(){
array[document.querySelector("#number").value -1].style.color = "red";
}
function submit() {
createPara(document.getElementById("input").value);
document.getElementById("input").value = "";
}
<input id="input" type="text" placeholder="Make new paragraph">
<input type="button" onclick="submit()" value="Submit">
<br>
<input type = "number" id = "number">
<button onclick = "change();">
Change the color to red
</button>
I know that this question sounds silly but i am curious why i can avoid this problem in JavaScript. Now in the code below i have given :
var btn=document.getElementById("btn");
btn.onclick = function get() {
var x = document.getElementById("text").value; // --> HERE
document.getElementById("para").innerHTML = x;
};
get();
<input type="text" id="text" value="">
<input type="submit" value="submit" id="btn">
<p id="para"></p>
Now when i assign the variable x inside the function ,after the ("text") i get the .nodeValue instead of getting the .value. Is that a problem with my code editor or i have an error, because every time i put a name inside the input field it shows the result inside the paragraph it appears and fast also disappears
So I see 2 problems here:
You didn`t close your script tag.
You are calling get(); but the function does not exist in that scope but is only assigned in the onclick event.
This should do the trick:
var btn=document.getElementById("btn");
btn.onclick = function get() {
var x = document.getElementById("text").value;
document.getElementById("para").innerHTML = x;
};
<input type="text" id="text" value="HELLO">
<input type="submit" value="submit" id="btn">
<p id="para"></p>
I have preset the value to "HELLO", but you can change it as you want, and it will deliver the value requested when clicking on the button.
I think your only problem may have been how you were declaring the event listener, I declared it as an event listener on the button listening to the 'click' event.
I also edited 'x' to be 'userInput' so it is more clear what it is trying to achieve.
var btn = document.getElementById("btn");
btn.addEventListener('click', function () {
var userInput = document.getElementById("text").value;
document.getElementById("para").innerHTML = userInput;
});
var btn=document.getElementById("btn");
btn.onclick = function () {
var x = document.getElementById("text").value; // --> HERE
document.getElementById("para").innerHTML = x;
};
btn.onclick()
<input type="text" id="text" value="hello">
<input type="submit" value="submit" id="btn">
<p id="para"></p>
This is a working example of what you are trying to do. You can't declare a function in that context as it's anonymous. My example works perfectly, but you should do something more like
function get() {
//Do something
}
btn.onclick = get;
get();
I am not sure whether this will solve or not. However, I suggest you by giving an onclick event inside the input tag.
<input type="submit" value="submit" id="btn" onclick="get()">
<script>
function get() {
var x = document.getElementById("text").value;
document.getElementById("para").innerHTML = x;
}
</script>`
I got a input number into a var. I subtracted it to a number.
Thank you vicodin for helping me! I fixed it and it works! (I changed names for my program)
<!DOCTYPE html>
<html>
<body>
<p></p>
<span><input type="number" id="guess1"><p id="g1s"></p></span>
<input type="button" onclick="Calculate()" value="Calculate">
<script>
function Calculate() {
var GuessCon1 = document.getElementById("guess1").value;
var GuessCon1sub = GuessCon1 - 500;
document.getElementById("g1s").innerHTML = GuessCon1sub;
}
</script>
</body>
</html>
You assigned a string "numb1" to variable g. If you want to get the value of the input, you need to find that element (e.g. with document.geElementById method) and take a value from it.
Also, you want to trigger calculation, for example by a button click. I added a code in a snippet, you can run it and play around with it to get the idea.
var button = document.getElementById("substract")
button.onclick = function() {
var g = document.getElementById("numb1").value
var a = 578;
var x = g - a;
document.getElementById("demo").innerHTML = x;
}
<input type="number" id="numb1">
<input type="submit" id="substract">
<p id="demo"></p>
Related links:
Input Text value Property
onclick event
A simple question about a form submit in HTML.
Why does this work:
var inputStuff = document.getElementById("inputBox");
var output = document.getElementById("outputBox");
function useMethod(element) {
output.innerText = inputStuff.value;
return false;
}
But this doesn't:
var inputStuff = document.getElementById("inputBox");
var output = document.getElementById("outputBox");
function useMethod(element) {
var out = output.innerText;
var into = inputStuff.value;
out = into;
return false;
}
Here's the HTML:
<h1>Put your input in here</h1>
<form onsubmit="return useMethod(this)" action="">
<input type="text" id="inputBox">
<input type="submit" value="Submit">
</form>
<h2>Output:</h2>
<p id="outputBox">Starter text</p>
Many thanks in advance for any help,
R
out = into; will simply assign the value of into (string) to out (string), whereas output.innerText = inputStuff.value; will invoke an implicit setter that will change the DOM value as well.
while loop in javascript
function calc(){
var one = document.getElementById("fv").value;
var two = document.getElementById("sv").value;
var one1 = parseInt(one);
var two1 = parseInt(two);
var total = 0;
if(one1<=two1){
while (one1 <= two1){
total = total+one1;
one1++;
total=total;
}
document.getElementById("tv").value = total;
}}
calc() //call function
</script>
<form>
There are some confusion using while loop in java script. can i use while loop for those type of calculation?
<p>"Calculation of sum between two numbers"</p>
<h5>First Number</h5><input type ="text" value="1" name="firstv" id="fv"><br>
<h5>Second Number</h5><input type="text" value="100" name="sectv" id="sv"><br>
<h5>Value</h5><input type="number" value= "" name="tv" id="tv"><br>
<button onclick="calc()" value="click">Calculate</button><br>
</form>
</body>
</html>
You need to stop the button from actually submitting the form. If you make sure that your Javascript function appears before your html and your button looks like this:
<button onclick="calc(); return false;" value="click">Calculate</button>
Then it should work properly
If you need to call the first calc() before the button is clicked, you need to do it when the document is ready:
document.addEventListener("DOMContentLoaded", function(event) {
calc();
});
Example