We Keep Coding

Why does my code only add "null" to my shopping lists?

I think the intention is clear: Either you press one button or the other to add the item you typed into the input-field to one or the other shopping list.
However, no matter what or if I write something at all, if I press one of the buttons, it will just add "null" to the list.
Why is that?
function sortItem1() {
document.getElementById("addToMarket").addEventListener("click", addToMarketList);
}
function sortItem2() {
document.getElementById("addToOnline").addEventListener("click", addToOnlineList);
}
var gottaBuy = document.getElementById("item");
var listForMarket = " ";
var listForOnlineShop = " ";
function addToMarketList() {
listForMarket = listForMarket + "<li>" + gottaBuy + "</li>";
document.getElementById("marketList").innerHTML = listForMarket;
document.getElementById("item").value = " ";
}
function addToOnlineList() {
listForOnlineShop = listForOnlineShop + "<li>" + gottaBuy + "</li>"
document.getElementById("onlineList").innerHTML = listForOnlineShop;
document.getElementById("item").value = " ";
}
window.addEventListener("load", sortItem1);
window.addEventListener("load", sortItem2);
<h1>What would you like to add?</h1>
<input type="text" id="item" />
<button type="button" id="addToMarket">Markt</button>
<button type="button" id="addToOnline">Online</button>
<h2>Buy at a store:</h2>
<ul id="marketList"></ul>
<h2>Buy online:</h2>
<ul id="onlineList"></ul>

The line var gottaBuy = document.getElementById("item") just assigns the html tag of the input to the variable.
What you want to retrieve is the value of the input and assigning it based on the button clicked. You can do that by assigning a separate variable within each button handlers and appending .value to get the input value like this:
function addToMarketList() {
var gottaBuy = document.getElementById("item").value;
listForMarket = listForMarket + "<li>" + gottaBuy + "</li>";
document.getElementById("marketList").innerHTML = listForMarket;
document.getElementById("item").value = " ";
}
function addToOnlineList() {
var gottaBuy = document.getElementById("item").value;
listForOnlineShop = listForOnlineShop + "<li>" + gottaBuy + "</li>"
document.getElementById("onlineList").innerHTML = listForOnlineShop;
document.getElementById("item").value = " ";
}
jsFiddle: https://jsfiddle.net/AndrewL64/e9t0rszh/1/

You could select the element from inside the click handlers, so you are sure it is already loaded.
And you also most likely want to add the actual value and not the element itself.
function addToMarketList() {
var gottaBuy = document.getElementById("item");
listForMarket = listForMarket + "<li>" + gottaBuy.value + "</li>";
document.getElementById("marketList").innerHTML = listForMarket;
document.getElementById("item").value = " ";
}
function addToOnlineList() {
var gottaBuy = document.getElementById("item");
listForOnlineShop = listForOnlineShop + "<li>" + gottaBuy.value + "</li>"
document.getElementById("onlineList").innerHTML = listForOnlineShop;
document.getElementById("item").value = " ";
}

How can I access a select in an HTML table cell

I added a select to a column of table cells with an ID. Using console.log I can see the select with the ID I gave it but when I try to set the value of the box using the ID I get a NULL reference error. What would the correct reference be for the box? Thanks.
JavaScript
function GetProc_Responce(r, responce) {
var table = "<tr><th>Emp</th><th>RA</th><th>PI</th><th>First Name</th><th>Last Name</th><th>Is A</th><th>Date Created</th><th>Date Modified</th></tr>";
strXml = new XMLSerializer().serializeToString(responce);
//console.log("returnString: " + strXml);
var oParser = new DOMParser();
oDOM = oParser.parseFromString(strXml, "text/xml");
//console.log(oDOM.getElementsByTagName("EmployeeID").length);
var l = oDOM.getElementsByTagName("EmployeeID").length;
for (i = 0; i <= l - 1; i++) {
a = oDOM.getElementsByTagName("Emp")[i];
_Emp = a.childNodes[0].nodeValue;
b = oDOM.getElementsByTagName("RA")[i];
_RA = b.childNodes[0].nodeValue;
c = oDOM.getElementsByTagName("PI")[i];
_PI = c.childNodes[0].nodeValue;
d = oDOM.getElementsByTagName("FirstName")[i];
_FirstName = d.childNodes[0].nodeValue;
e = oDOM.getElementsByTagName("LastName")[i];
_LastName = e.childNodes[0].nodeValue;
f = oDOM.getElementsByTagName("IsA")[i];
_IsA = f.childNodes[0].nodeValue;
g = oDOM.getElementsByTagName("DateCreated")[i];
_DateCreated = g.childNodes[0].nodeValue;
h = oDOM.getElementsByTagName("DateModified")[i];
_DateModified = h.childNodes[0].nodeValue;
table += "<tr><td>" +
a.childNodes[0].nodeValue + "</td><td>" +
b.childNodes[0].nodeValue + "</td><td>" +
c.childNodes[0].nodeValue + "</td><td>" +
d.childNodes[0].nodeValue + "</td><td>" +
e.childNodes[0].nodeValue + "</td><td>" +
//f.childNodes[0].nodeValue + "</td><td>" +
"<select id=\"s1\"><option value=\"0\">0</option><option value=\"1\">1</option></select>" + "</td><td>" +
g.childNodes[0].nodeValue + "</td><td>" +
h.childNodes[0].nodeValue + "</td></tr>";
document.getElementById('Proc').rows.item(3).cells(5).value = 1;
//OR
document.getElementById('s1').selectedValue = 1;
//NEITHER ONE WORKS
}
document.getElementById("Proc").innerHTML = table;
console.log(document.getElementById('Proc').rows(3).cells(5));
}
HTML
<div><center>
<table id="Proc"></table>
</center></div>

You must assign unique id values. Your code assigns all of them the id value s1 which is invalid in HTML.
Change your code as follows to assign s0, s1, s2 ... etc. For clarity I don't repeat the code that is not concerned:
for (i = 0; i <= l - 1; i++)
{
// ...
table += "<tr><td>" +
// ...
e.childNodes[0].nodeValue + "</td><td>" +
"<select id=\"s" + i + "\"><option value=\"0\">0</option><option value=\"1\">1</option></select>" + "</td><td>" +
// ...
}
You can access one of the select elements by its id with getElementById:
var element = document.getElementById('s' + i);
Where i is a number from 0 to the last one assigned in the loop.
You can get or set the value of a select element via its value attribute. For example, to set its value to 1, do:
document.getElementById('s' + i).value = '1';

Here we'll get div object
var div = document.getElementById('test');
Here we'll get table object
var table = div.getElementsByTagName('table')[0];
Here we'll add new select to td
table.rows[0].cells[0].innerHTML += '<select id="s2"></select>';
Search existed select (with id="s1")
var select_1 = table.rows[0].cells[0].getElementsByTagName('select')[0];
console.log(select_1);
Search all selects in td
var select_array = table.rows[0].cells[0].getElementsByTagName('select');
console.log(select_array);
https://jsfiddle.net/e59dzhsy/

document.getElementById('Proc').rows.item(3).cells(5) references a td, which does not have a value.
document.getElementById('s1') references the select box
you want document.getElementById('Proc').rows.item(3).cells(5).children[0] to reference the select
A better method would be to use some of the built in tag finding functions such as document.getElementById('Proc').rows[3].getElementsByTagName('select')[0]. Then you don't have to deal with what column the select is in. Of course, if you have more than one select on the row, then you'll need to do something different. At that point, I'd suggest adding class names to your selects so you can use document.getElementById('Proc').rows[3].getElementsByClassName('select1')[0]

Jquery click only works with double click

I am so close to getting this. Here's my code that is returning the correct url, but only when button is double-clicked. I only need one click to retrieve the image.
var origin = 'COMP';
var area = 'US';
var type = 'typeA';
var level = 'Xnay';
var time = '0';
var btn1 = document.getElementById("redbutton").winControl;
function change_area(new_area) {
area = new_area;
}
function change_type(new_type) {
type = new_type;
}
$(btn1).click(function () {
var src = "http://somesite.net/folder/WEB_" + origin + "_" + area + "_" + level + "_" + type + "_" + time + "HR.png";
change_area('GB');
change_type('typeB')
$('#mainmap').attr('src', src), false;
});

You try by adding
$(document).ready(function() { }); block
before the following line
$(btn1).click(function () {
Finally as,
$(document).ready(function() {
$(btn1).click(function () {
var src = "http://somesite.net/folder/WEB_" + origin + "_" + area + "_" + level + "_" + type + "_" + time + "HR.png";
change_area('GB');
change_type('typeB')
$('#mainmap').attr('src', src), false;
});
});

modifying value of input text box after clicking on a check box

I have a function where I read the the text input value and update a counter which is displayed in another div. In some cases I show a check box along with text input field. At the moment when user select the check box the amount which is entered in the text input field is doubled and the result is showing in the counter correctly.
What am I trying to achieve id when the user select the check box the input field should be doubled along with the counter.
The text input in the betslip is added dynamically. So there might be more individual betlsips with check boxes in the view.
Here is my code (HTML view is generated dynamically through JS)
BetSlip.prototype.createSingleBetDiv = function(divId, Bet, winPlaceEnabled) {
document.betSlip.setSingleCount($('[name=singleBet]').length);
var id = divId.replace('_div','');
// If such bet already exists
if (!document.betSlip.singleDivExists(divId) && document.betSlip.getSingleCount() < maxNumberInBetslipRacing) {
var singleBetPosition = (Bet.position == null) ? '' : Bet.position;
var raceInfo = Bet.categoryName + ', ' + raceFullName + ' ' + Bet.name + ', ' + Bet.betTypeName + ' (' + Bet.value.toFixed(2) + ')';
var div = $('<div name="singleBet" class="bet gray2" id="' + divId + '"/>')
// Appending div with data
.data('Bet', Bet)
// Appending error element
$(div).append($('<p id="' + divId + '_error" style="display:none;"/>')
.addClass('alert alert-danger alert-dismissable'))
// Appending info element
$(div).append($('<p id="' + divId + '_info" style="display:none;"/>')
.addClass('alert alert-success alert-dismissable'))
var bgDiv = $('<div id="bgDiv"/>').appendTo(div)
// Append left part
var productName = (Bet.productName != null) ? getBrandBetName(Bet.productName) : Bet.betTypeName;
var leftDiv = $('<div class="left"/>')
.appendTo(div)
// Info abt the bet
.append($('<p class="title"><b>' + singleBetPosition + ' ' + Bet.horseName + '</b><span style="float:right">' + productName + '</span></p>'))
.append($('<p class="title">' + raceInfo + '</p>'))
.append($('<p/>')
.addClass('supermid')
// Creating input field
.append($('<input type="text" id="' + id + '_input"/>')
.keypress(function(event) {validateInputs(event, 'decimal')})
.keyup(function() {document.betSlip.updateSinglesTotalPrice()})))
// Creating WIN / PLACE checkbox selection
if (winPlaceEnabled) {
$(leftDiv).append($('<p><input name="winPlaceCheckBox" id="' + id + '_checkbox\" type="checkbox"><b>' + winPlace + '</b></p>')
.click(function() {document.betSlip.updateSinglesTotalPrice()}))
}
// Append Done and Reuse btns
$(leftDiv).append($('<a id="reuseBtn" class="button confirm gray reuse" style="display: none;"/>').html(reuse).click(function() {document.betSlip.reuseBet(divId)}))
$(leftDiv).append($('<a id="doneBtn" class="button confirm red donebtn" style="display: none"/>').html(done)
.click(function(){$('#' + divId).find('a.right.orange').click()}))
// Append right part
$(div).append($('<a class="right orange"/>')
.click(function() {
document.betSlip.removeSingleBetDiv(divId);
})
// Closing btn
.append($('<div class="icon_shut_bet"/>')))
// Add div to the bet slip map
document.betSlip.addSingleDiv(divId, div);
return div;
}
else {
if(this.getSingleCount() < maxNumberInBetslipRacing){
$("#betSlipError").show();
$("#betSlipError").html(sameBet);
return null;
}
else{
$("#betSlipError").show();
$("#betSlipError").html(maxBet);
return null;
}
}
}
In the win/place check box I am calling a function which take cares of updating the final price in the counter (Total bet). I would like to update the same in the input text field as well (double up the input value). In case check box is deselected the input amount should be half (both in input field as well as in the counter).
Function which updated the total bet value
BetSlip.prototype.updateSinglesTotalPrice = function() {
var totalBet = 0;
$('[name=singleBet]').each(function() {
var inputValue = $(this).find('input:text').val();
// Win / Place
if (document.betSlip.checkWinPlace(this)) totalBet += Number(inputValue * 2);
// Win or Place
else totalBet += Number(inputValue);
});
$("#betSinglesTotalBet").html(replaceParams(totBetPrice, [totalBet.toFixed(2), document.betSlip.getCurrency()]));
}

Hiding <p> field in javascript

Here's my code for gathering titles/posts from reddit's api:
$.getJSON("http://www.reddit.com/search.json?q=" + query + "&sort=" + val + "&t=" + time, function (data) {
var i = 0
$.each(data.data.children, function (i, item) {
var title = item.data.title
var url = item.data.url
var id = item.data.id
var subid = item.data.subreddit_id
var selftext = item.data.selftext
var selftextpost = '<p id="post' + i + '">' + selftext + '</p><br>'
var post = '<div>' + '' + title + '' + '</div>'
results.append(post)
results.append(selftextpost)
i++
});
});
Basically every post (selftext) is assigned a different paragraph id (post0, post1, post2, etc) for every result that's pulled. I'm also going to create a "hide" button that follows the same id scheme based on my i variable (submit0, submit1, submit2, etc). I want to write a function so that based on which button they click, it will hide the corresponding paragraph. I've tried doing an if statement that's like if("#hide" + i) is clicked, then hide the corresponding paragraph, but obviously that + i doesn't work. How else can I tackle this?

Could you try something like the below?
showhide = $("<a class='hider'>Show/Hide</a>");
results.append(showhide);
$(showhide).click(function() {
$(this).next().toggle();
}
Alternatively:
$.each(data.data.children, function (i, item) {
var title = item.data.title
var url = item.data.url
var id = item.data.id
var subid = item.data.subreddit_id
var selftext = item.data.selftext
var selftextpost = '<p id="post' + i + '">' + selftext + '</p><br>'
var showhide = $("<a class='hider" + i + "'>Show/Hide</a>");
var post = '<div>' + '' + title + '' + '</div>'
results.append(post)
results.append(selftextpost)
results.append(showhide);
$(showhide).click(function() {
$(this).next().toggle();
});
i++
});