I cannot get the input value to go into my invitation on submit. After pressing submit the values are stored as I have checked the values in my array using
document.getElementById("volunteersName" + index).value;
all the values are storing properly.
however when I check the innerHTML using
document.getElementById("name" + index).innerHTML;
It still shows empty even though they should equal as I have set them to equal each other using
document.getElementById("name" + index).innerHTML = document.getElementById("volunteersName" + index).value;
Please help me see the light in what I'm doing wrong. Thanks
* Partial code below *
HTML
<section id="pageForm">
<form action="#">
<label for="numberOfVolunteers">Number Of Volunteers:</label>
<input id="numberOfVolunteers" type="number" onkeypress = "event()" name="numberOfVolunteers" placeholder="Enter Number Of Volunteers" />
<p id="newFields"></p>
<br>
<br>
<input class="visibility" onclick="invite()" type="button" value="Submit">
</form>
</section>
<div id="test">
</div>
<script type="text/javascript" src="js/main.js"></script>
JS
function invite() {
var volunteersName = [];
var name = [];
for (index = 1; index < volunteersName.length; index++) {
document.getElementById("name" + index).innerHTML = document.getElementById("volunteersName" + index).value;
}
}
You have a couple of issues here:
The code inside the loop in invite() will never execute because index (1) will always be more than the length of volunteersName (0)
The syntax for creating the span where the name will go is wrong. If you want to use string interpolation, you need to use ... id="name${index}" ... inside the backticks
For the first problem I suggest you use the input value from the first input to set the closing condition for the for loop:
var numberOfVolunteers = document.getElementById("numberOfVolunteers").value;
for (index = 1; index <= numberOfVolunteers; index++) {
For the second, your code should look something like the following:
inviteForm.innerHTML = `Hello <span id="name${index}"> Volunteers Name </span>!
<br/>
<br/> You have been invited to volunteer for an event held by <span id='organizationName2'>Organizations Name</span> on <span id='eventDate2'>Event Date</span>. Please come to the following website: <span id='websiteURL2'>Website URL</span> to sign up as a volunteer.
<br/>
<br/> Thanks!
<br/>
<br/>
<span id='hostName2'>Hosts Name</span>`;
Related
I have created 5 input text boxes using HTML and made a button while clicking the button the values will print the result input text box. The first 4 fields are my inputs and the last text field is my output. unable to debug the issue. kindly find the code and help to find the issue.
function JS(){
var h=document.getElementById('h').value;
var w=document.getElementById('w').value;
var g=document.getElementById('g').value;
var t=document.getElementById('t').value;
var total =(h+w+g+t);
document.getElementById('result').innerHTML=total;
}
<h2> Calculator</h2>
<input type="text" placeholder="value1" id="h">
<input type="text" placeholder="value2"id="w">
<input type="text" placeholder="value3" id="g">
<input type="text" placeholder="value4" id="t">
<input type="text" placeholder="result" id="result">
<!--
<p
id="result">
</p>
-->
<button id="btn" onClick="JS()">Calculate</button>
There are two keys to resolving your issue:
Coerce your inputs to numbers, which I'm doing by adding a + in front of the value assignments. If you don't do this, your values may be treated like strings and concatenated rather than added like numbers.
Set the value of the input element, not the innerHTML. If you'd rather use a <p> element, which it appears you commented out in your sample code (and which I restored for completeness of my answer), consider using innerText.
See example here:
function JS() {
var h = +document.getElementById('h').value;
var w = +document.getElementById('w').value;
var g = +document.getElementById('g').value;
var t = +document.getElementById('t').value;
let p_result = document.getElementById('p_result');
var total = (h + w + g + t);
document.getElementById('result').value = total;
p_result.innerText = total;
}
<h2> Calculator</h2>
<input type="text" placeholder="value1" id="h">
<input type="text" placeholder="value2" id="w">
<input type="text" placeholder="value3" id="g">
<input type="text" placeholder="value4" id="t">
<input type="text" placeholder="result" id="result">
<br>
<p id="p_result" style="color:red;"></p>
<br>
<button id="btn" onClick="JS()">Calculate</button>
function JS(){
var h=document.getElementById('h').value;
var w=document.getElementById('w').value;
var g=document.getElementById('g').value;
var t=document.getElementById('t').value;
var total =(Number(h)+Number(w)+Number(g)+Number(t));
document.getElementById('result').value =total;
}
.value instead of .innerHTML
also, you should convert inputs values to number cause instead of making the sum will be as consider them string( for example if you type 1 , 2 , 3 , 4 without converting to number will be 1234 if you convert to number will be 10
I am currently experimenting with simple addition by adding the values of three input elements.
I have three input elements and a button element with an onclick listener to invoke my function. The function is to simply return the output of the sum of those values inputted by the user in an h2 element, and that is all. Here are the HTML and JS:
<div class="inputFields">
<input class="lado" type="text" />
<input class="lado" type="text" />
<input class="lado" type="text" />
</div>
<button type="button" onclick="getArea()">click</button>
<h2 id="areaResult"></h2>
var s1 = document.getElementsByClassName('lado')[0].value;
var s2 = document.getElementsByClassName('lado')[1].value;
var s3 = document.getElementsByClassName('lado')[2].value;
/*to my understanding, the .value property (like .innerHTML) renders a
string value. Do please correct me if I'm wrong.*/
function getArea() {
document.getElementById('areaResult').innerHTML =
Number(s1) + Number(s2) + Number(s3);
/*Utilized Number() method to convert the string values rendered by
the .value properties to number values so as to perform addition
arithmetic operation rather than concatenation.*/
}
The output for some mysterious reason to me however is always 0 no matter what numbers I input or even if I input non-numerical characters.
What am I doing wrong?
Declare all the variables inside the function.
You do not need to write document.getElementsByClassName every time. Simply use a variable to store all the class element then use index to get the value from that variable like the following:
function getArea() {
var lado = document.getElementsByClassName('lado');
var s1 = lado[0].value;
var s2 = lado[1].value;
var s3 = lado[2].value;
document.getElementById('areaResult').innerHTML =
Number(s1) + Number(s2) + Number(s3);
}
<div class="inputFields">
<input class="lado" type="text" />
<input class="lado" type="text" />
<input class="lado" type="text" />
</div>
<button type="button" onclick="getArea()">click</button>
<h2 id="areaResult"></h2>
I'm trying to add the rows dynamically plus auto-increment of a counter.I want to start with 1 then 2 then 3 and so on . I have added my code on plunker ,in which every time the max value is getting in first column like 4 then 1,1,2,3.Where am i going wrong ?i Want it to be 1,2,3,4.
Here is the plunker link http://plnkr.co/edit/GuDbJ3SHOPvWkHfNfd8E?p=preview
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder1").appendChild(oClone);
document.getElementById("myVal").value=_counter;
}
<div id="placeholder1">
<div id="template">
<div>
Value:<input type="text" id="myVal" placeholder="1">
Quantity:<input type="text" placeholder="Qty">
<input type="button" onClick="Add()" value="Click! ">
</div>
</div>
I think it is because you have multiple divs with the id="myVal". The id attribute should be unique on the page. If not, your page will still load, but you may have unexpected behavior.
You are changing the id of the template div, but not the myVal div.
I assume you are looking for something like this:
var _counter = 0;
function Add() {
_counter++;
var oClone = document.getElementById("template").cloneNode(true);
oClone.id += (_counter + "");
document.getElementById("placeholder1").appendChild(oClone);
oClone.getElementsByClassName("myVal")[0].value = _counter;
}
<div id="placeholder1">
<div id="template">
<div>
Value:
<input type="text" class="myVal" placeholder="1">Quantity:
<input type="text" placeholder="Qty">
<input type="button" onClick="Add()" value="Click! ">
</div>
</div>
</div>
In your original you are cloning your template with the same id for the input. So when you do document.getElementById("myVal").value=_counter;, you only get the first input. I changed it to use class instead and get the input with the appropriate class that is a child of the cloned node.
I have a forms which allows multiple steps to be submitted. When a user clicks "add step" another textarea appears. I am using CKeditor. It works great of the first iteration, but on all subsequent ones, it shows a standard text area. Here is my code:
<form method="post" action="process_project.php">
<b>Steps for your project:</b>
<div> </div>
Step 1
<div id="divWho">
<textarea name="projSteps[]" class="steps" id="1" rows="10" cols="60"></textarea>
</div>
<div> </div>
<input type="button" value="Add project step" onClick="addTextArea();">
<input type="submit" name="submit" value="submit" />
</form>
<script type="text/javascript">
var counter = 1;
var limit = 11;
function addTextArea() {
if (counter == limit-1) {
alert("You have reached the limit of adding " + counter + " project steps");
return false;
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Step " + (counter + 1) + " <br><textarea name='projSteps[]' id=counter rows='10' cols='60'>";
document.getElementById('divWho').appendChild(newdiv);
counter++
return true;
}
}
</script>
<script> CKEDITOR.replace('1');</script>
How can I make each new dynamically created text areas also use CKeditor? I have been working on this for hours and I am stumped.
I think you need to move CKEDITOR.replace('1'); inside the addTextArea() method enclosed in the else block before the return statement.
And also if you hard code the replace parameter to '1', it will only convert the first instance of textarea with id 1 to CKEditor and ignore others. Generate an Id dynamically and pass it to repalce method. Something like below,
var step = 'step'+counter;
div = <textarea name='projSteps[]' id=step rows='10' cols='60'>;
CKEDITOR.replace(step);
I haven't written the second step completely, I guess you can modify it as you need.
I'm working on a similar functionality and this approach works for me.
use like this.
<textarea class="ckeditor" name="abc1"</textarea>
and in JS add this
CKEDITOR.replaceAll( 'ckeditor' );
I hope it will work for all the textareas.
I have a simple HTML page that has a text field, a button, and a div.
I want to have a user input a stock symbol into the field. When they push submit button, an image of a graph will display inside the div.
The graphs already exist #http://ichart.finance.yahoo.com/w?s=
To get a graph for a paticular symbol, I need to add the symbol, an '&', and a large random number. This is a working example
http://ichart.finance.yahoo.com/w?s=YHOO&1234567890
I am not able to make the symbol, the &, and the random number append to the end of the URL. I am also not sure if I am using form correctly.
Here is the code:
function changeChart() {
var rand_no = Math.random();
rand_no = rand_no * 100000000;
var sym = document.myform.symbol.value;
document.getElementById('divService').innerHTML = '<' + 'object id="foo" name="foo" type="text/html" data="http://ichart.finance.yahoo.com/w?s="' + sym + '"&"' + rand_no + '"><\/object>';
}
<form name = "myform">
<p>
Enter stock symbol
<input id="Text1" type="text" name="symbol"/>
<input type="button" value="Go" name="Submit" onclick="changeChart(this); return false;"/>
</p>
<div id="divService">
<object id="foo" name="foo" type="text/html" data="http://www.aol.com/"></object>
</div>
Here is the complete code, The CSS wouldn't display properly on here.
https://docs.google.com/document/d/1pq39BKxWRqDS162jWss7-fvTbr0r28wq4VFiedh8SCY/edit?hl=en
I checked just some minutes ago and it seems there's no need for &1234567890-like part of URL, so I'd change the code to get this:
function changeChart() {
var sym = document.forms[0].elements['symbol'].value;
var divContent = '<'+'object id="foo" name="foo" type="text/html" data="http://ichart.finance.yahoo.com/w?s=' + sym +'"/>';
document.getElementById('divService').innerHTML = divContent;
}
Given that random number is not necessary, and in HTML code:
<form name = "myform">
<p>
Enter stock symbol
<input id="symbol" type="text" name="symbol"/>
<input type="button" value="Go" name="Submit" onclick="changeChart(); return false;"/>
</p>
<div id="divService">
<object id="foo" name="foo" type="text/html" data="http://www.example.com/"></object>
</div>
</form>
Note that now id has the same value as name for text input, and removed this argument for function call. I hope this helps you. (Update: Tested OK on jsFiddle and here is result)
When you make a random number using Math.random, Javascript returns a double. When you put that random number into the URL, you want it to be a string. Try changing the first line of changeChart to this:
var rand_no = String(Math.random() * 1000000);