Could someone help me please with this?
So I have two text boxes, one for the day of the month, one for the actual text(event title). Then there is a button to run the code and place the event. This should overwrite whatever had previously been the event for that day.
I was trying to write a function for it, but it didn't work.
I have dayEvent for every day in a month.
<p>Enter a day: <input type="text" id="enter_day" /></p>
<p>Enter an event: <input type="text" id="enter_day" /></p>
<input type="button" onclick="myEvent()" value="Click here" />
var dayEvent = new Array();
function myEvent() {
var newEvent = document.getElementById('enter_day').value;
var dayForEvent = document.getElementById('enter_day').value;
dayEvent[dayForEvent] = newEvent;
}
dayEvent[1] =
"<br /><a href='#'>Giveaway with Cesar Millan</a><br />12 am <br />online";
dayEvent[2] =
"<br /><a href='#'>Classic Cinema: Wings</a><br />7 pm <br />at AMC Empire 25";
Fixing the duplicate ID problem fixes your code:
var dayEvent = [
"<br/><a href='#'>Giveaway with Cesar Millan</a><br/>12 am <br/>online",
"<br/><a href='#'>Classic Cinema: Wings</a><br/>7 pm <br/>at AMC Empire 25"
];
function myEvent() {
var newEvent = document.getElementById('enter_event').value;
var dayForEvent = document.getElementById('enter_day').value;
dayEvent[dayForEvent] = newEvent;
console.info("Array after change: ", dayEvent)
}
console.info("Array before change: ", dayEvent)
<p>Enter a day: <input type="text" id="enter_day" /></p>
<p>Enter an event: <input type="text" id="enter_event" /></p>
<input type="button" onclick="myEvent()" value="Click here" />
Note that I changed your code to use the literal array declaration syntax with square brackets.
Next, remember that array indices start with 0, not 1.
Finally, I would suggest that you use an input with type="number" for the day input, or do some validation yourself with parseInt() or such.
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've created a basic profit calculator which is pretty much working fine. My issue is that every time I enter a number into each of the relevant fields, you can see the workings out in the "Total profit" field. It first tells me my entry is NaN, then -infinity, and then shows the workings. Once I click on my calculate button, I am then finally displayed with the correct number.
For this post I am not concerned with why it is producing the NaN (not a number), but why am I seeing it populated in the field in the first place. I want this field to remain blank until I click Calculate, and then see the resulting number. I suspect it's to do with my JavaScript code but I am a complete newbie - and very stuck.
Your thoughts are most appreciative.
<form id="profitCalculator" action="" class="dark-matter">
<h1>Profit Calculator</h1>
<fieldset>
<p><label>Case Cost:<br />£
<input name="casecost" type="text" value="" size="14" maxlength="8" /></label></p>
<p><label>Units per case:<br /> <input name="packs" type="text" value="1" size="14" maxlength="8" /></label></p>
<p><label>Sell price:<br /> £ <input name="sell_price" type="text" value="" size="14" maxlength="8" /></label></p>
<p><input type="button" class="button" OnClick="Circle_calc(this.form);" value="Calculate"></p>
<p>Total Profit:<br /> £ <input name="profit" type="text" value="0" autocomplete="off" SIZE=14></p>
<p><input type="reset" class="button" value="Reset"></p>
</fieldset>
</form>
And the JavaScript
<script type="text/javascript">
document.getElementById('profitCalculator').onclick = function () {
var casecost = this.elements['casecost'].value || 0;
var packs = this.elements['packs'].value || 0;
var sell_price = this.elements['sell_price'].value || 0;
var profit = (sell_price - casecost) / packs;
this.elements['profit'].value = profit.toFixed(2);
}
</script>
Thank you
You've set a click handler on the form element. Since click events bubble, clicks on the elements inside the form bubble to the form as well. So that's triggering an update to your profit element on anything that any element considers a click.
This diagram from the DOM3 events spec (which has since been folded into the DOM4 spec's events section) may help clarify how bubbling works:
You have a Onclick event on your button that calls Circle_calc function.
Change your function passing the form element as a parameter, and it will work.
Circle_calc = function (form) {
var casecost = form.elements['casecost'].value || 0;
var packs = form.elements['packs'].value || 0;
var sell_price = form.elements['sell_price'].value || 0;
var profit = (sell_price - casecost) / packs;
form.elements['profit'].value = profit.toFixed(2);
}
JsFiddle here
This is my form:
<form>
<input type="text" placeholder="Check in date" id="checkin" />
<input type="text" placeholder="Check out date" id="checkout" />
<input type="submit" onclick="result()" id="submit" />
</form>
And this is my javascript for calculating the money=days*price
<script language="javascript" type="text/javascript">
function result()
{
var a = document.getElementById("checkin").value;
var b = document.getElementById("checkout").value;
var checkin = moment(a).format('DD-MM-YYYY');
var checkout = moment(b).format('DD-MM-YYYY');
var days= checkout.diff(checkin, 'days');
var price=100;
alert("The money you have to pay is: "+days*price);
}
</script>
This is my test case:
checkin date = 05-12-2014,
checkout date = 25-12-2014
When I click submit, nothing happens.
Can anyone please explain to me why and how can I fix this. Thank you!
function result(e) //e refers to event.
{
e.preventDefault();
var a = document.getElementById("checkin").value;
var b = document.getElementById("checkout").value;
var checkin = moment(a, 'DD-MM-YYYY');
var checkout = moment(b, 'DD-MM-YYYY');
var days= checkout.diff(checkin, 'days');
var price=100;
alert("The money you have to pay is: "+days*price);
}
<script src="http://momentjs.com/downloads/moment.js"></script>
<form>
<input type="text" placeholder="Check in date" id="checkin" />
<input type="text" placeholder="Check out date" id="checkout" />
<input type="submit" onclick="result(event)" id="submit" />
</form>
First of all you're submitting the form. You need to prevent that using event.preventDefault(). I think your problems will melt away after that. I strongly suggest to restrict the date inputs. Either use a library to select dates from a picker or provide the user with some guidance to the date format.
Use this to convert dates to moment dates
var checkin = moment(a, 'DD-MM-YYYY')
var checkout = moment(b, 'DD-MM-YYYY')
See the jsbin
I am new to Javascript and I am having trouble figuring out why this code does not work the way I think it should.
Here is my Javascript code. All I'm trying to do (for now) is take the values from these text boxes and drop downs, and concatenate them.
<script>
function AdvancedSearch () {
var color = document.getElementByID("AdvSearchColor").value;
var ply = document.getElementByID("AdvSearchPly").value;
var cat = document.getElementByID("AdvSearchCategory").value;
var size = document.getElementByID("AdvSearchSize").value;
var description = document.getElementByID("AdvSearchDescription").value;
var fullsearch = ply + color + cat + description + size;
}
</script>
<form id="advsearach" onsubmit="AdvancedSearch()">
Product Color: <input type="text" name="productcolor" id="AdvSearchProductColor"><br>
Product Ply Rating: <input type="text" name="productply" id="AdvSearchPlyRating"><br>
Product Category: <input type="text" name="productcategory" id="AdvSearchProductCategory"><br>
Product Size: <input type="text" name="productsize" id="AdvSearchProductSize"><br>
Product Description: <input type="text" name="productdescription" id="AdvSearchProductDescription"><br>
<input type="button" onclick="javascript:AdvancedSearch()" value="Search!">
</form>
So I'm having trouble on the trivial of problems, just debugging this and getting it to work. Spent a few hours on it already.. Thanks for anyone who takes the time to look at this, it will probably save me a lot of time in the long run and that is a very nice thing to do.
you should use document.getElementById instead of document.getElementByID. There's a typo "Id" != "ID".
And IDs of your form MUST match those in javascript form o.O
<form id="advsearach">
Product Color: <input type="text" name="productcolor" id="AdvSearchColor"><br>
Product Ply Rating: <input type="text" name="productply" id="AdvSearchPly"><br>
Product Category: <input type="text" name="productcategory" id="AdvSearchCategory"><br>
Product Size: <input type="text" name="productsize" id="AdvSearchSize"><br>
Product Description: <input type="text" name="productdescription" id="AdvSearchDescription"><br>
<input type="button" onclick="javascript:AdvancedSearch()" value="Search!">
</form>
<script>
function AdvancedSearch () {
var color = document.getElementById("AdvSearchColor").value,
ply = document.getElementById("AdvSearchPly").value,
cat = document.getElementById("AdvSearchCategory").value,
size = document.getElementById("AdvSearchSize").value,
description = document.getElementById("AdvSearchDescription").value,
fullsearch = ply + color + cat + description + size;
console.log(fullsearch);
}
</script>
Overview:
I got a website that has sentences that people can post to facebook, but in each sentence there are input boxes, which people can change the default value. Kinda like an digital "Mad Lib".
EXAMPLE
I like __ and I think he is __.
the underscores would be a text-field with a default value that would disappear once someone focuses on it.
Final string: I like JEN and I think she is HOT.
GOAL
Save final String and Post to Facebook (not worried about the facebook yet)
HTML
<span>I like</span>
<input name="post1_1" value="Tom" type="text" id="post1_1" />
<span>I think she is</span><input name="post1_2" value="Nice" type="text" id="post1_2" />
POST NOW
<span>My website is</span>
<input name="post2_1" value="Great" type="text" id="post2_1" />
POST NOW
SCRIPT
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script>
var post1_1 = null;
var post1_2 = null;
var post2_1 = null;
function Post1(){
var post1_1 = $('#post1_1').val();
var post1_2 = $('#post1_2').val();
var post1 = 'I like ' + post1_1 + ' I think she is ' + post1_2;
alert(post1);
}
function Post2(){
var post2_1 = $('#post2_1').val();
var post2 = 'My website is ' + post2_1;
alert(post2);
}
</script>
I am very new to web any help would be appreciated.
At a quick glance, there are a few things wrong with your script.
post1_1 = ('#post1_1').val();
post2_1 = ('#post2_1').val();
post2_2 = ('#post2_2').val();
I'm assuming you're using jQuery here. You need the $ in front of the ().
post1_1 = $('#post1_1').val();
post2_1 = $('#post2_1').val();
post2_2 = $('#post2_2').val();
Second, you set these after you set the post variables.
var post1 = 'Your are' + post1_1;
var post2 = 'You smell like' + post2_1 + 'and' + post2_2;
This will be "Your are null" (which, i'm assuming should be "You are"). You should set the variables to the input values before you use them.
var post1_1 = $('#post1_1').val();
var post2_1 = $('#post2_1').val();
var post2_2 = $('#post2_2').val();
var post1 = 'Your are' + post1_1;
var post2 = 'You smell like' + post2_1 + 'and' + post2_2;
alert(post1);
alert(post2);
I know this is just an example, but there is no post2_2 in your HTML, and the sentences in the HTML don't match those in the JavaScript.
I think you should consider only the two text fields and an ID of the current sentence. Like sentence_id[], field1[], field2[]. You can treat it as array:
<form action="javascript:;">
<div id="sentence-0">
<input type="hidden" name="sentence_id[0]" value="1" />
John is at <input type="text" name="field1[0]" /> with <input type="text" name="field2[0]" />
<button id="submit-sentence-0" class="submit">Send</button>
</div>
<div id="sentence-1">
<input type="hidden" name="sentence_id[1]" value="2" />
Mary is at <input type="text" name="field1[1]" /> working with <input type="text" name="field2[1]" />
<button id="submit-sentence-1" class="submit">Send</button>
</div>
</form>
Just an idea, hope it helps you.
I can think of many ways as to how this could be implemented, but the way this question is worded leaves a lot of ambiguity to what one exactly wants.
Consider the following:
Pre-generated statements such as: I like X and I think he is Y.
Where X and Y could be a dropdown or textbox control of choices.
I believe one said something like a textbox, so an html form would be appropriate.
Static example (to be handled by php/django/rails/etc):
<form action="/status/" method="post">
I like <input type="text" name="noun" />
and I think he is <input type="text" name="verb" />
<input type="submit" value="Update" />
</form>
Now modify this to fit the server side language to handle the request.
Now for a Javascript example (I'm not very good with js):
<form name="status" action="handle-data.js">
I like <input type="text" name="noun" />
and I think he is <input type="text" name="verb" />
Update
</form>
<script type="text/javascript">
function submitform(){
document.status.submit();
}
</script>
In the handle-data.js one would likely manipulate the data or whatnot.
See http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
for more Javascript examples.