This is a html / javascript code: Will someone help fix the content within function enter(). Want to show all numbers within the “first” and “second” text boxes, 5 and 12 printed in the textarea. Thank you for the time in advance.
<html><head><title>Temp</title></head>
<body>
<div class = "container">
<form name = "myform">
<TABLE border = 0>
<TR>
<TD><input type = "text" name = "first" class = "mytext" size = "4"></TD>
<TD><input type = "text" name = "second" class = "mytext" size = "4"></TD>
<TD><input class = "button" name = "" value = "Example" onclick = "example()"></TD>
<TD><input class = "button" name = "" value = "Enter" onclick="enter()"></TD>
</TR>
</TABLE>
<textarea id = "textArea" rows = "10" cols = "10" style = "font-size: 16pt"></textarea><br>
</form>
<script type = "text/javascript">
function example(){
myform.first.value = "5";
myform.second.value = "12";
}
function enter(){ **
var x = document.getElementById("textArea");**
//for (var i = myform.first.value; i <= myform.second.value; ++i) **
// x.value += i + "\n"; **
x.value = myform.first.value;**
}
</script>
</div> <! end of container>
</body></html>
Hi there @ashliii Can you give us more information or guidelines or an example ? so we can look into it, meaning the code example your working on so many developers can look into it and see what can be done to help you. You can try codepen to share your code with us.
https://codepen.io/
Can you be more specific… meaning, you have 2 text input boxes were you will input a value in each box meaning a number, and a button, when you click on it you want the numbers in the input fields to appear in the textarea box ?
Hi, I am new to this forum. Are you able to see my code below. Will you help fix the content within function enter(). Want to show all numbers within the “first” and “second” text boxes, 5 and 12 printed in the textarea.
Temp
@ashliii can you please start by declaring a function and assign two parameters. Then grab the element target in this case the textarea id where you want to display the content on the DOM and then do a callback with the same function name, assigning two arguments. That will be your first option as you state as “example”. then the second option its an element.addeventListener(); were you listen for an event in this case “click” event but thats after you do the first example. Let us know if you have questions to guide you, but like @camperextraordinaire has mention please display code as post as a proper way.
Before you began working on the problem to be solve, i think will be good to give you some good practices feedback.
- First you need to clean up your markup (HTML). you cannot have css and js mixing together, its bad practices and sometimes code can be messy for other developers. Make sure you have your HTML,CSS,JS files in separate files.
- You also have markup that are not well coded, you have a button with an input type=“text” and a onlick function on it.
<input class = "button" name = "" value = "Enter" onclick="enter()"><
I wrote down a similar markup that should be your boiler plate. Do no copy, try to understand the markup and then we can continue with the following phase.
This should be your starting front end markup. Here you will find same markup but with a much better structure HTML(cleaner).
<!-- wrap div parent container -->
<div class="container">
<!-- form tag -->
<form id="my-form">
<!-- input value fields -->
<input type="text" name="first" id="first" class="mytext" placeholder="first"/>
<input type="text" name="second"id="second" class="mytext" placeholder="second"/>
<!-- button type button -->
<button type="button" id="btn"/>Click!</button><br><br>
<!-- your textarea -->
<textarea id="my-values" cols="20" rows="5"></textarea>
</form>
</div>
Let the forum know if you have more questions, here are very good talented developers that know more than me, feel free to questions. I’m my self learner as well.
Thanks for input. I have seen others comment that it is better to use a button tag than an input tag to implement a button. I placed the textarea tag outside of the form in order to implement the table so I could have a better control of the placement.
why dont you try first the code i send you(HTML) once you have a better understanding on this then you be able to do what you wanted to accomplish, its much better to understand the basics first. Can you work on creating a function and add two parameters “5”, “12” as a string to display on the DOM, and then call the function ?
Sorry, think I’ve come to a freeze. Need your help.
https://codepen.io/ashliii/pen/NWqeJZe
based on your code.
document.getElementsByTagName("h1")[0].style.fontSize = "80px";
function example(String one, String two){
my-form.first.value = "5";
my-form.second.value = "12";
}
Try not to add styles [0].style.fontSize = "80px"; on document.getElementsByTagName("h1")[0]
- So first why not creating a function this funtion will take two parameters right ? called first,second values:
- Your task will be grabbing the element were you want to be displayed, in this case its your textarea an has an id of “my-values”;
- Once you have that target of your text area saved in a variable and then add the values parameters (first,second) as as a string.
function example(first,second){
// 1. grab the id of textarea and saved in a variable
// then use element.innerHTML = first + second ;
};
//callback function, your calling this function, so when the DOM loads and your function as well will insert the string values.
example("5","12");
I am fairly fluent in java, understands how to transfer values from one function to another but not so familiar in JS.
Still unable to do what you are suggesting, still needs your help.
https://codepen.io/ashliii/pen/NWqeJZe
I understand but you doing well.
base on your code:
function example(first, second){
var x = document.getElementById("my-values");
x.value.document.innerHTML = first + second ;
};
You actually almost there so you miss to call the function “example()” so you can load your values and insert them into the function.
this is one way of doing it this will eventually place the two strings in the textarea onces the DOM its loaded.
function example(first, second){
// make sure you change the x into a more descriptive nane. (textAreaResults)
var textAreaResults = document.getElementById("my-values");
// You just need .innerHTML no need for value.document, because your not grabbing any value;
textAreaResults.innerHTML = first + second ;
};
// Call the function example() to insert the strings into the funtion once
//the DOM its loaded.
example('5',"12");
Note: This is only when you call the function when the page loads (DOM).
I see you have a button so im assuming when you input two values and click the button will show on the textarea as well ?
What I am trying to get is to show:
5
6
7
8
9
10
11
12
printed on the textarea, but it is not happening.
Can you suggest a URL where there are worked out tutorials of such examples. Thanks.
Now i see… thats why will be better to describe what you want specific.
also make sure this are numbers.
function displayValues(first, second){
var resultEl = document.getElementById('my-values');
for (var i = first; i <= second; i++) {
resultEl.innerHTML += i + "\n";
}
};
displayValues(5,12);
Thank you. Can you also show how to populate the two textboxes with 5 and 12.
https://codepen.io/ashliii/pen/NWqeJZe
Yes now will be good to have a task for that particular manner. Now that you know how it’s worked.
-
You need to grab both ids from the two txt fields and at the end now you can use element.value to grab its value input, lastly save them into a variable.
-
For the button click you need an event. To listen for the event click.
-
Grab the id of the button and add an event. Here is a link on how to do that.
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
-
The two variables that you save inside the function you will need to pass them as arguments to the for loop in order to display your content to the DOM.
Make sure you use the right html and dont change what we discuss. Please try not to copy, understand the concept structure, if you have questions please feel free to ask.
<html>
<head>
<title>Temp</title></head>
<body>
<div class = "container">
<form name = "my-form">
<input type = "text" name="first" id="first" class = "mytext" placeholder = first>
<input type = "text" name="second" id="second" class = "mytext" placeholder = second>
<button type = "button" id="btn">Click!</button><br><br>
<textarea id="my-values" rows = "5" cols = "20"></textarea>
</form>
</div>
</body>
</html>
JS File
document.getElementById('btn').addEventListener('click', calculate);
function calculate(){
// Get the inputs values of both txt fields and change from string to number.
// store to variables.
var txtOne = Number(document.getElementById('first').value);
var txtTwo = Number(document.getElementById('second').value);
// Display the result in the DOM textarea field.
var textAreaResults = document.getElementById("my-values");
// Loop iterate from initial input number to last input number.
for( var i = txtOne; i <= txtTwo; i++ ){
textAreaResults.innerHTML += i + '\n';
}
};
Still cannot get the results desired. Appreciate a hint.
https://codepen.io/ashliii/pen/NWqeJZe
Not sure what you are really looking as a result ? I have already done the solution you where asking (5,12) will have an input of 5,6,7,8,9,10,11,12 not sure what else you want ?