We Keep Coding

Why won't my my mad lib compile?

So I have to use javascript and html to make a mad lib. I am asking the user to enter values and then hit the button and it is supposed to generate a story using the values they entered.
Here is my HTML:
<ul>
<li>Your Name: <input type="text" id="name"></li>
<li>Adjective: <input type="text" id="adjective"></li>
<li>State: <input type="text" id="state"></li>
<li>Animal: <input type="text" id="animal"></li>
<li>Month: <input type="text" id="month"></li>
<li>Adjective: <input type="text" id="adjective2"></li>
<li>Animal: <input type="text" id="animal2"></li>
<li>Object: <input type="text" id="object"></li>
</ul>
<button id="ready-button">Ready</button>
<div id="story"></div>
<script>
function madLib() {
var storyDiv = document.getElementById("story");
var adjective = document.getElementById("adjective").value;
var noun = document.getElementById("noun").value;
var state = document.getElementById("state").value;
var animal = document.getElementById("animal").value;
var month = document.getElementById("month").value;
var adjective2 = document.getElementById("adjective2").value;
var animal2 = document.getElementById("animal2").value;
var object = document.getElementById("object").value;
storyDiv.innerHTML ="One day, " + name + " was in the backwoods of " + state + " riding their pet " + animal + " it wasn't often that " + name + " got the chance to do this so they always made the most of their adventure. Usually, it was a fun experience until that one day in " + month + " they were minding their own business when all of the sudden the " + adjective2 + " " + animal2 + " jumped out from behind a small " + object + ". " + name + " could not beieve what they were seeing.";
}
var readyButton = document.getElementById('ready-button');
readyButton.addEventListener('click', madLib);
</script>

It seems that you got "noun" mixed up with "name" when grabbing the values for your story.
You have <input type="text" id="name"></li> and you use the name variable in your story a few times, but in the madLib function you have
var noun = document.getElementById("noun").value;
//document.getElementById("noun") will be undefined because there is no "noun element"
which should probably be
var name = document.getElementById("name").value;

Java script undefined variable, basic html form

I've been struggling with this for around an hour now and rewrote it about three different times and I can't for the life of me figure out what the issue is, regardless of what is entered, everything besides for the name field will return a value, however the name will just return undefined. I've gone over this so many times, I've copy+pasted+modified the working ones, there's not a single typo that I can find... What is going on here?
Item Name: <input type="text" id="item_name" placeholder="Enter a price..."/> </br>
Item Price: <input type="text" id="item_price" placeholder="Enter a price..."/> </br>
Item Description: <input type="text" id="item_description" placeholder="Enter a description..."/> </br>
Item Image(link): <input type="text" id="item_image" placeholder="Enter a image link..."/> </br>
rsid: <input type="text" id="rs_item_id" placeholder="Enter a item id..."/> </br>
rsam: <input type="text" id="rs_item_amount" placeholder="Enter a item amount..."/> </br>
<button id="update">Update item</button>
<script>
var name = document.getElementById("item_name");
var price = document.getElementById("item_price");
var desc = document.getElementById("item_description");
var img = document.getElementById("item_image");
var rsid = document.getElementById("rs_item_id");
var rsam = document.getElementById("rs_item_amount");
var button = document.getElementById("update");
button.addEventListener("click", function() {
alert("Name = " + name.value + "\n"
+ "Price = " + price.value + "\n"
+ "Desc = " + desc.value + "\n"
+ "Img = " + img.value + "\n"
+ "rsid = " + rsid.value + "\n"
+ "rsam = " + rsam.value + "\n");
});
</script>

The problem is that because you make them all global variables the name one clashes with the window.name property.
Either using a different variable name, or creating a closure will work

Put name, price, desc, img, rsid, rsam inside event handler.
var button = document.getElementById("update");
button.addEventListener("click", function() {
var name = document.getElementById("item_name");
var price = document.getElementById("item_price");
var desc = document.getElementById("item_description");
var img = document.getElementById("item_image");
var rsid = document.getElementById("rs_item_id");
var rsam = document.getElementById("rs_item_amount");
alert("Name = " + name.value + "\n"
+ "Price = " + price.value + "\n"
+ "Desc = " + desc.value + "\n"
+ "Img = " + img.value + "\n"
+ "rsid = " + rsid.value + "\n"
+ "rsam = " + rsam.value + "\n");
});
Demo: http://jsbin.com/fivos/1/edit?html,output

Simple Javascript Calculator

I'm trying to learn Javascript and I feel like I have a decent grasp on the fundamentals but I am having problems making it do things that i want .. for example.. I am trying to create a simple form in html that calculates the sum of 2 numbers.. here is my html and javascript:
<head>
<script type="text/javascript">
function adder(a,b) {
var a = document.getElementById('firstNum').value;
var b = document.getElementById('secondNum').value;
var numbers = new Array(a,b);
var sum = 0;
for (i=0; i < numbers.length; i++) {
sum += parseInt(numbers[i]);
}
//this part i need help with
document.getElementById('answer').write("First Number: " + a + " plus Second Number: " + b + " is " + sum).value; //this part i need help with
</script>
</head>
<body>
<form id="additionForm">
A + B = C : <input type="text" id="firstNum" placeholder="A">
+ <input type="text" id="secondNum" placeholder="B">
<input type="button" id="addBtn" value="Add" onClick="adder();">
= <input type="text" id="answer" placeholder="C">
</form>
</body>
My problem is that i don't know how to get the javascript to overwrite the value attribute for my form input id=answer .. or if i'm supposed to be using Jquery instead .. thanks in advance.

function adder() {
var a = parseInt( document.getElementById('firstNum').value, 10);
var b = parseInt( document.getElementById('secondNum').value, 10);
var sum = a + b;
//this part i need help with
document.getElementById('answer').value = "First Number: " + a + " plus Second Number: " + b + " is " + sum).value; //this part i need help with
}

If you want to modify an input field in javascript, you can simply set the value attribute:
document.getElementById('answer').value = "First Number: " + a + " plus Second Number: " + b + " is " + sum;

If statements with radio buttons not assigning variables

I'm trying to learn about form building. I have form in which I would like to assign the value of certain variables to certain form fields, based on which radio button is selected. But my code is always defaulting to the first radio choice, no matter which one I select.
I've tried to chain 'if' conditions, if/else conditions and alter variable names, but it doesn't make a difference.
I've also found that the code doesn't work in JSfiddle (http://jsfiddle.net/GEZPU/1/), but I'm not sure why it says the function is not defined?.
HTML
Input 1
<select id="box0">
<option>Tampa</option>
<option>Phoenix</option>
</select>
<br>
<br>Input 2
<select id="box1">
<option>Bucs</option>
<option>Cards</option>
</select>
<br>
<br>If option radios
<br>
<br>
<input type="radio" id="box2" name="football" value="No Data">No Data
<br>
<br>
<input type="radio" id="box3" name="football" value="No Playoffs">No Playoffs
<br>Games to go?
<input id="box4" size="10">Superbowl location?
<input id="box5" size="10">
<br>
<br>
<input type="radio" id="box6" name="football" value="Yes Playoffs">Made Playoffs
<br>Superbowl location?
<input id="box7" size="10">
<p>
<input value="Write summary" onclick="writetext()" type="button">
<br>
<form>
<textarea rows="35" cols="45" placeholder="Template" id="output"></textarea>
</form>
<br>
</p>
Code
function writetext() {
var mytext = document.getElementById('output');
var captext = "";
// Checklist variables
var box_0 = $("#box0").val();
var box_1 = $("#box1").val();
captext += box_0 + "\n - " + box_1 + "\n ";
if ($('#box2').prop("checked ", true)) {
var box_margin = $("#box2").val();
captext += "\nMargins: \n - " + box_margin + "\n ";
}
if ($('#box3').prop("checked ", true)) {
var box_margin2 = $("#box3").val();
var box_margin_dist = $("#box4").val();
var box_margin_site = $("#box5").val();
captext += "\nMargins: \n - " + box_margin2 + "\n - Dist: " + box_margin_dist + "\n - margin " + box_margin_site + "\n ";
}
if ($('#box6').prop("checked ", true)) {
var box_margin3 = $("#box6 ").val();
var box_margin_site3 = $("#box7 ").val();
captext += "\nMargins: \n - " + box_margin3 + "\n - (Specify margin)" + box_margin_site3 + "\n ";
}
mytext.value = captext;
}

if ($('#box2').prop("checked ", true)) {
is always true.. I think you are trying to compare if it is set to true or false.
Supposed to be
if ($('#box2').prop("checked ")) {
It is always a good idea to avoid attaching events inline. Attach the events using javascript
Also you can simply use is(':checked') method to check if the radio is checked or not.
I observed that you are, using the same jQuery object in multiple places. It would be better to cache them in such instances as it will improve the performance.
And the same code can be refactored a bit ..
UPDATE
$('#write').click(write);
function write() {
var mytext = document.getElementById('output'),
captext = "",
// box elements
$box_0 = $('#box0'),
$box_1 = $('#box1'),
$box_2 = $('#box2'),
$box_3 = $('#box3'),
$box_4 = $('#box4'),
$box_5 = $('#box5'),
$box_6 = $('#box6'),
$box_7 = $('#box7'),
// Checklist variables
box_0 = $box_0.val();
box_1 = $box_1.val();
captext += box_0 + "\n - " + box_1 + "\n ";
// All the radios have the same name.
// So only 1 radio will be checked at any point of time
// This would give you the radio that is checked
var $radio = $('input[type=radio][name=football]:checked');
if ($radio.length) {
captext += "\nMargins: \n - " + $radio.val() + "\n ";
if ($radio.is($box_3)) {
captext += "\n - Dist: " + $box_4.val() + "\n - margin " + $box_5.val() + "\n ";
} else if ($radio.is($box_6)) {
captext += "\n - (Specify margin)" + $box_7.val() + "\n ";
}
}
mytext.value = captext;
}
Check Fiddle

If you take a look at http://api.jquery.com/prop/ you'll notice that .prop("checked") returns true or false while .prop("checked", true) assigned the value 'true' to the property "checked". Try switching those out and see what happens.

Button in HTML/JavaScript not working

<html>
<h1>MB calculator</h1>
<script type="text/javascript">
var level = "0";
var brawlpoints = "0";
var brawlenergy = "0";
var pointsmake = "0";
function setlv() {
level = document.forms["form"]["lv"].value;
alert("level = " + level);
var maxen = 95 + (level * 5);
var exptolv = 110 + (level * 15);
}
function setbpbe() {
brawlpoints = document.forms["form"]["bp"].value;
brawlenergy = document.forms["form"]["be"].value;
alert("points per brawl = " + brawlpoints + "; energy per brawl = " + brawlenergy);
}
function pointsupdate() {
pointsmake = document.forms["form"]["p2m"].value;
alert("you want to make " + pointsmake);
}
function calculatevalues() {
var math1 = pointsmake / brawlpoints + 1;
var math2 = brawlenergy * math1;
var math3 = maxen * 1.75;
var math4 = math2 / math3 + 1;
document.write("To achieve your goal it will take you " + math1 + " brawls, this will take you " + math2 + " energy, or " + math4 + " levels, assuming a 75% refill levels you.");
}
</script>
<form name="form">level:
<input type="text" name="lv" value="0">
<br>
<input type="button" value="update level" onclick="setlv()">
<br>points per brawl done:
<input type="text" name="bp" value="0">
<br>energy per brawl done:
<input type="text" name="be" value="0">
<br>
<input type="button" value="update brawl energy and points" onclick="setbpbe()">
<br>how many points you want to make:
<input type="text" name="p2m" value="0">
<br>
<input type="button" value="set points you want to make" onclick="pointsupdate()">
<br>
<input type="button" value="calculate" onclick="calculatevalues()">
</form>
<h1>LV calculator</h1>
</html>
Put where the problem is in bold, for some reason that button does nothing when pushed...
So yea, test it in html, someone i know who knows some of html/javascript seems to think the form is broken or something like that...
EDIT: got it to work, how to round down in javascript if anyone reads this?
EDIT: up, not down

You need to declare the maxen variable in the global scope
var level = "0"; var brawlpoints = "0"; var brawlenergy = "0";
var pointsmake = "0";
//declare the maxen variable here
var maxen = "0";
function setlv()
{
//left of your code

Are you expecting this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><h1>MB calculator</h1>
<script type="text/javascript">
var level = "0"; var brawlpoints = "0"; var brawlenergy = "0"; var pointsmake = "0";
var maxen;
function setlv()
{
level = document.forms["form"]["lv"].value;
alert("level = " + level);
maxen = 95+(level*5);
var exptolv = 110+(level*15);
}
function setbpbe()
{
brawlpoints = document.forms["form"]["bp"].value;
brawlenergy = document.forms["form"]["be"].value;
alert("points per brawl = " + brawlpoints + "; energy per brawl = " + brawlenergy);
}
function pointsupdate()
{
pointsmake = document.forms["form"]["p2m"].value;
alert("you want to make " + pointsmake);
}
function calculatevalues()
{
var math1 = pointsmake/brawlpoints + 1;
var math2 = brawlenergy*math1;
var math3 = maxen*1.75;
var math4 = math2/math3 + 1;
document.write("To achieve your goal it will take you " + math1 + " brawls, this will take you " + math2 + " energy, or " + math4 + " levels, assuming a 75% refill levels you.");
}
</script>
<form name="form">
level:
<input type="text" name="lv" value="0">
<br>
<input type="button" value="update level" onclick="setlv()">
<br>
points per brawl done:
<input type="text" name="bp" value="0">
<br>
energy per brawl done:
<input type="text" name="be" value="0">
<br>
<input type="button" value="update brawl energy and points" onclick="setbpbe()">
<br>
how many points you want to make:
<input type="text" name="p2m" value="0">
<br>
<input type="button" value="set points you want to make" onclick="pointsupdate()">
<br>
**<input type="button" value="calculate" onclick="calculatevalues()">**
</form>
<h1>LV calculator</h1>
</HTML>
maxen is declared as a local variable in the function setlv and you are trying to access it in another function. Make it global