I am building in javascript a simple feedback that has a text area and is grabbing the text and displaying a successful message when the add button is clicked. When the view feedback button is clicked it should render the feedback and it does but if I click the button once and then type in the text area again and again it keeps rendering multiple times the same feedback message. Attached is my javascript code.
var array = Array();
var x = 0;
function addFeedback() {
array[x] = document.getElementById('feedback').value;
x++;
document.getElementById('feedback').value = '';
document.getElementById('result').innerHTML =
'<h2><h3> Your have successfully Added Feedback!</h3></h2>';
}
var feedback = '';
function displayFeedback() {
for (var i = 1; i < array.length + 1; i++) {
feedback = array[i - 1] + '<br/>';
console.log(feedback);
}
document.getElementById('result').innerHTML =
'<h2>feedback Details: </h2>' + feedback.split('<br>');
}
<html>
<head>
<script src="script.js" type="text/javascript"> </script>
</head>
<body>
<!-- Fill code here -->
<div>
<h2>Feedback for the ART OF LIVING</h2>
<div>
<label for="feedback"></label>Enter the Feedback:
<textarea id="feedback" name="feedback" value="feedback" type="text"></textarea>
<div>
<input type="button" id="create" name="create" onclick="javascript:addFeedback()">Add Feedback</input><br/>
<input type="button" id="view" name="view" onclick="javascript:displayFeedback()">View feedback</input>
</div>
<div id="result"></div>
</div>
</div>
</body>
</html>
Related
I have a tool that is supposed to be an easy way to create a checklist, and it works, but what happens when I use it for something with two checkboxes, it creates a new line between each one, is there a way to stop it from doing that? my code is here for yes/no
<!DOCTYPE html>
<html>
<h1>Create a checklist</h1>
<div>
<input type="text" placeholder="Text for object" id="txt" />
<button onclick="addYN()">Add yes/no</button>
</div>
</html>
<div style="background-color: grey;" id="prv"></div>
<script>
var pv = document.getElementById("prv");
var txt = document.getElementById("txt");
function getVarYn() {
let tx = txt.value;
return (
"<div><p>" +
tx +
"</p> <p> yes</p> <input type = 'checkbox'/> <p>no </p> <input type = 'checkbox'/> </div> "
);
}
function addYN() {
var t = txt.value;
pv.innerHTML = pv.innerHTML + getVarYn();
}
</script>
The problem is not the <div> you create but all the <p> tags. <p> tags are paragraphs and they do create "a new block/line"
See like so you would have no new lines
var pv = document.getElementById("prv");
var txt = document.getElementById("txt");
function getVarYn() {
let tx = txt.value;
return (
"<div>" +
tx +
" yes<input type = 'checkbox'/>no<input type = 'checkbox'/> </div> "
);
}
function addYN() {
var t = txt.value;
pv.innerHTML = pv.innerHTML + getVarYn();
}
<h1>Create a checklist</h1>
<div>
<input type="text" placeholder="Text for object" id="txt" />
<button onclick="addYN()">Add yes/no</button>
</div>
<div style="background-color: grey;" id="prv"></div>
Note: the closing </html> element should always be the very last element of your HTML document. And everything else should be inside the <body> element which you do not have. The basic structure looks like so
<!DOCTYPE html>
<html>
<body>
<!-- ADD all your HTML content here -->
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<!-- BUT NOW you need to finish with all the HTML here -->
<!-- THE VERY LAST thing here before the closing </body> -->
<!-- should be the <script> tags -->
</body>
</html>
I made a tool which make my work a little easier by inserting a value into a url in a new window on multiple sites. It was working quite well but now I am having the problem of the search value being cleared onsubmit.
Javascript:
<script language="JAVASCRIPT">
function run() {
var request = document.text.query.value;
var req = "";
var endofurl = "endofurl.html";
for(var i = 0; i < request.length; i++) {
var ch;
if((ch = request.substring(i, i + 1)) == " ") req += " ";
else req += ch;
}
if(document.search.website.checked) {
var website = open( "https://www.website.com/" + req, "website");
}
//--></script>
HTML:
<form name="search">
Please select the networks you want to use.
<p>
</center>
</p>
<div class="row">
<div class="column">
<br>
<input name="website" type="checkbox">Website to Search
<form name="text" onsubmit="run(); return false;">
<center>And enter your Query.</center>
<center>
<input name="query" placeholder="Steropodon" value="" size="50" type="TEXT">
<input value="Search" onclick="run()" type="BUTTON">
</center>
So far, return false had been working to keep the value of the input in the form="text" input name="query" but now it seems to clear it and reload the page. I'm not sure what changed.
You have errors in your code opening and closing the tags.
Try this code. It works:
<html>
<head></head>
<body>
Please select the networks you want to use
<div class="row">
<div class="column">
<br>
<input name="website" type="checkbox">Website to Search
<form name="text" onsubmit="run(); return false;">
<center>And enter your Query.</center>
<center>
<input name="query" placeholder="Steropodon" value="" size="50" type="TEXT">
<input value="Search" onclick="run()" type="BUTTON">
</center>
</form>
</div>
</div>
<script language="JAVASCRIPT">
function run() {
var request = document.text.query.value;
var req = "";
var endofurl = "endofurl.html";
for(var i = 0; i < request.length; i++) {
var ch;
if((ch = request.substring(i, i + 1)) == " ") req += " ";
else req += ch;
}
var checkbox = document.getElementsByName("website");
if(checkbox[0].checked) {
var website = open("https://www.website.com/" + req,
"website");
}
}
</script>
</body>
</html>
Hope it helps.
I fixed it. It was not the tags. I had only pasted a small amount of the total code to make it easier to read but I failed at making it easier to read. The problem was undefined inputs. I have been adding many if statements but didn't have a corrosponding checkbox. Oops.
Thanks for the help.
So my dilemmna is that I don't know how to record what the user inputs. (my goal as of now is to simply print what the user enters in an input box, not to add the numbers)
var x = document.getElementById('textboxone').value;
Why isn't this working?
<!DOCTYPE html>
<html>
<head>
<link href="cssFiles/ttt.css" rel="stylesheet" type="text/css"></link>
<script Language ="JavaScript">
//create skeleton divs
function createDivs () {
var s;
s = '<div class="simplebox" id="divBody">Bla 3 bla</div>';
document.write(s);
}
//create body skeleton
function createBodyDivs (sID) {
var s;
s = '<div class="smallerbox" id="divInput">';
s += '<div id="textboxone"><span>Add <input type="text" ></input></span></div>';
s += '<div id="textboxtwo"><span>To <input type="text" ></input></span></div>';
s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';
var oDiv = document.getElementById(sID);
oDiv.innerHTML = s;
}
//adding the two numbers from input boxes
function addnumbers(form){
var x = document.getElementById('textboxone').value;
alert(x)
}
</script>
</head>
<body>
<script Language ="JavaScript">
createDivs();
createBodyDivs('divBody');
</script>
</body>
</html>
Check out AngularJS my friend! :)
JSFIddle Demo
<div ng-app="">
<input type="text" ng-model="data.message" />
<h1>{{data.message}}</h1>
<div class="{{data.message}}"></div>
</div>
using: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js
I've quickly checked the code and first of all you input button will not trigger addNumbers(form) since the onclick of the input doesn't point of that function.
Then for the function itself, document.getElementById('textboxone').value returns undefined because the actual value you want is in the <input> and not in the <div id="textboxone">
So if you have you're createBodyDivs function modified so that the id where on the input, then this document.getElementById('textboxone').value would actually return the correct value.
function createBodyDivs (sID) {
var s;
s = '<div class="smallerbox" id="divInput">';
s += '<div><span>Add <input type="text" id="textboxone" ></input></span></div>';
s += '<div><span>To <input type="text" id="textboxtwo" ></input></span></div>';
s += '<div id= style="margin-top: 100px;"><span> Click here to find the answer! <input type="button" value = "Answer Generator" OnClick="(this.form)"></input></span></div>';
var oDiv = document.getElementById(sID);
oDiv.innerHTML = s;
}
For the click binding, you button should be the following for it to work:
<input type="button" value = "Answer Generator" OnClick="addnumbers()"></input>
I'm writing a JS code to calculate a final grade given some individual grades and output the result in the html page but when I trigger the event and function it outputs a wrong answer for a split second then immediately disappears along with the values entered into the text box.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Problem 2</title>
<script src="grades.js" type="text/javascript"></script>
</head>
<body>
<h1>Grade Calculator</h1>
<form id ="myForm">
<div id="assignments">
HW <input type="text" size="1"/> / <input type="text" size="1"/><br/>
HW <input type="text" size="1"/> / <input type="text" size="1"/><br/>
HW <input type="text" size="1"/> / <input type="text" size="1"/>
</div>
<div>
<input type="checkbox" /> Curve +5?
</div>
<div id="resultsarea">
<p>
<!--add buttons here -->
<button id="comp">Compute</button>
<button id="clr">Clear</button>
</p>
<!-- add results here -->
</div>
</form>
</body>
</html>
JS:
window.onload = pageLoad;
function pageLoad()
{
var cbutton = document.getElementById("comp");
cbutton.onclick = compute;
}
function compute()
{
var values = document.getElementsByTagName("input");
var marks = 0;
var total = 0;
for (var i=0; i < values.length; i++)
{
if(values[i].type == "text")
{
if (i%2 == 0)
marks += parseInt(values[i].value);
else
total += parseInt(values[i].value);
}
}
var result = Math.round(marks/total);
document.writeln(result);
}
This is in the head :
<script language="javascript" type="text/javascript"> f
function TextDefine(val) {
var i= 0;
var array1 = val.value.split("\n");
for ( i = 0; i < array1.length; ++i) {
array1[i] = "[b]" + array1[i] + "[/b]";
}
document.getElementById('another').value = array1.join("\n");
}
</script>
Then This is in the body:
<textarea name="data" id="data"></textarea>
<textarea name="another" id="another"></textarea>
<input type="button" name="submit1" value="Submit"
onclick="TextDefine(document.getElementById('data'))" />
i would like to add another text area so that when i click on the generate button, it will also get the content of the text area i just created. example:
text area 1
content of the text area 1
text area i just created
content of the text area 2
then the generated content content in the thrid text area should be:
[b]content of the text area 1[/b]
content of the text area 2
please see the javascript code why it had [b], i do not know how do to it so i need your help :( Thank You!
Is the keyword function being split onto two words something to do with entering it into stackoverflow? The below works for me:
<html>
<head>
<script language="javascript" type="text/javascript"> function TextDefine(val){ var i= 0; var array1 = val.value.split("\n"); for ( i = 0; i < array1.length; ++i) { array1[i] = " [b]" + array1[i] + "[/b]"; } document.getElementById('another').value = array1.join("\n"); }</script>
</head>
<body>
<form>
<textarea name="data" id="data"></textarea>
<textarea name="another" id="another"></textarea>
<input type="button" name="submit1" value="Submit" onclick="TextDefine(document.getElementById('data'))" />
</form>
</body>
</html>
Is this what you want to do?
http://jsbin.com/eligo4/edit
<script language="javascript" type="text/javascript">
function TextDefine(val, anotherval){
var i= 0;
var array1 = val.value.split("\n");
for ( i = 0; i < array1.length; ++i) {
array1[i] = "[b]" + array1[i] + "[/b]";
}
document.getElementById('generate').value = array1.join("\n")+"\n"+ document.getElementById('another').value;
}
</script>
<textarea name="data" id="data"></textarea>
<textarea name="another" id="another"></textarea>
<textarea name="generate" id="generate"></textarea>
<input type="button" name="submit1" value="Submit" onclick="TextDefine(document.getElementById('data'), document.getElementById('another'))" />