We Keep Coding

javascript to change language based on form input hidden value

I'm not really sure how to do this. I have a form with a language tag and I need to be able to have the 3rd party non editable text change to Spanish. In the form is a hidden field
So
if
<input type="hidden" name="lg" value="1">
then
$("#continue_shopping").val("Sigue Explorando");
$('#checkout_button a').text("Hagámoslo!");
else
$("#continue_shopping").val("Keep On Exploring");
$('#checkout_button a').text("Let's Do This!");
I have the English side done and I'm sure there is cleaner code to use but I'm just using
<script>
$("#continue_shopping").val("Keep On Exploring");
</script>
<script>
$('#checkout_button a').text("Let's Do This!");
</script>
Any help pointing me in the correct direction would be great.
Thank you
3rd party page code...
<div class="container">
<div class="col-sm-12">
<div class="col-sm-8">
<section id="cart_contents" class="fluid">
#cart_contents#
</section>
</div>
<div class="col-sm-3">
<section id="cart_details" class="fluid">
#cart_upsell#
#cart_shipping#
#cart_tax#
#cart_coupon#
#cart_message#
#cart_totals#
#cart_validation#
#cart_buttons#
</section>
<SCRIPT>
$("#continue_shopping").val("Keep On Exploring");
</SCRIPT>
<script>
$('#checkout_button a').text("Let's Do This!");
</script>
</div>
</div>
</div>

Web Scrapy!! How can I crawl using Click event data?

I try to crawl this page : http://www.11st.co.kr/html/main.html
but there are some problems.
First, Scrapy cannot interpret javascript.
I want to get some 'href' data to crawl again in that button(red square one)
Site screencapture
even I cannot use selenium.
Because button code is in script.
so xpath can't find.
<script id="headerNavigationTemplate" type="text/x-handlebars-template">
{{#ifCond templateType '===' 'main'}}
<nav class="header_gnb" id="gnbNavArea">
{{else}}
<div class="header_gnb" id="gnbNavArea">
{{/ifCond}}
<div class="inner">
<h1 class="hide">대메뉴</h1>
<div class="gnb_l">
<div class="gnb_nav gnb_nav_category" id="gnbCategoryArea">
<p name="gnbNavBtn"><button type="button" class="gnb_btn_all" data-ga-event-category="PC_GNB" data-ga-event-action="전체보기 버튼" data-ga-event-label=""><span class="in_btn"><span class="ico"></span>전체보기</span></button></p>
<div class="gnb_nav_category_layer">
<div class="gnb_total_category">
<div class="row" id="navCtgrRow1"></div>
<div class="row" id="navCtgrRow2"></div>
<div class="row" id="navCtgrRow3"></div>
<div class="row" id="navCtgrRow4"></div>
<div class="row" id="navCtgrRow5"></div>
<div class="row" id="navCtgrRow6"></div>
<div class="row" id="navCtgrRow7"></div>
<div class="row" id="navCtgrRow8"></div>
<div class="row" id="navCtgrRow9"></div>
I want to get data that hide in
//div[#class = "gnb_total_category"]/div
how can I crawl.
Please help me.

Please try following script to get required data:
from selenium import webdriver
driver = webdriver.Chrome()
driver.get('http://www.11st.co.kr/html/main.html')
driver.find_element_by_xpath("//span[contains(text(), '전체보기')]").click()
print(driver.find_element_by_xpath('//div[#class="gnb_total_category"]/div').text)

How to make this area display: none?

I'm making a web application. First see this image:
Now, you can see the area outlined by yellow line. The list with white background is dynamic (It is displayed when something is typed in search bar). Now what I want is when I click anywhere out of this area (Search input field + List), the list should be display: none. I've tried a few things but for that I had to write a lot of code as I did this for different divs separately.
Also, I don't want to paste the whole code here as it is too long. So I'm just providing you HTML to get an idea of this picture.
<header>
<div id="headerdiv">
<div class="headerlogo"><img src="#" alt="Passwords"></div>
<div class="quit"><img src="#" alt="Quit"></div>
</div>
</header>
<div id="functions">
<div id="funcLeft">
<div id="addbuttonwrap"><input class="addbutton" type="button" value=" + ADD"></div>
<div class="heading1">Your saved passwords</div>
<input class="funcbutton" type="button" value="EMAIL">
<input class="funcbutton" type="button" value="CAREER">
<input class="funcbutton" type="button" value="SOCIAL">
<input class="funcbutton" type="button" value="OTHER">
</div>
<div id="funcRight">
<div id="search">
<form name="searchform" method="post" action="">
<input type="text" name="searchinput" placeholder="Enter any keyword">
</form>
</div>
<div class="heading1 heading2">GUIDELINES</div>
<div class="slides">
<!--CONTENT-->
</div>
</div>
</div>
<footer>
<div id="footer">
Copyright: Protected
</div>
</footer>
NOTE: While writing answer, you can assume any TAG Name/class/ID etc. for any element as code is not sufficient. I just want to know what to do.

You want to hide the search when someone clicks away, you can do this with Javascript with a onclick event.
var elementToHide = document.getElementById("searchElement");
window.onclick = function(e){
if(e.target != elementToHide){
elementToHide.style.display = "none";
}
}
This will hide the element contained in elementToHide (can be any element in the DOM) when the user clicks on an element which is not this one.
The variable e contains the click event of which we check the target element in the if
Hope it helps

$(document).on("click", function(e) {
if(e.target.className != "search_element"){
$("#element_list").hide();
}
});
you can try this.

i think you are looking for a js free solution (or easiest approach). I would personally recommend using + and :focus operator from css
.search-with-submenu{
.submenu{
display: none;
}
input[type=search]:focus + .submenu{
display: block;
}
}

Navigation html with Cheerio web page scraper

I'm following this tutorial how to screen scrape with cheerio for Node.js and I'm 2-seconds away from just downloading the entire page and using Javascript to extract the information I need, which I'm sure is much more difficult than actually using Cheerio, but I'm having difficulty understanding now to navigate the HTML with Cheerio.
How do I extract the number '2' "blind-cow-white-number"?
Here is the HTML:
<div id="mainCows" class="row-fluid">
<div class="zone zone-content">
<article class="projection-page content-item">
<article class="post post-page content-item blind-cow">
<h1>blind cow</h1>
<div>
<div class="blind-cow-header" style="margin-bottom:15px">
<div class="blind-cow-list"> my list </div>
<div style="margin: 0 auto; width: 90%; text-wrap: none; text-align: center;">
<div class="blind-cow-white-number"> 1 </div>
<div class="blind-cow-white-number"> 2 </div>
</div>
<div class="blind-cow-died"> 3 </div>
<table class="blind-cow-table">
<table class="blind-cow-table">
<div class="blind-cow-Locations"> </div>
<br>
<div class="blind-cow-footer">
</div>
</article>
</article>
</div>
</div>
How do I achieve this with cheerios?
Is there a web screen scraper for node.js that allows me to use xpath instead?

Cheerio uses the same syntax and almost everything else as jQuery.
$(".blind-cow-white-number").eq(1).html();

JavaScript dynamic list

I am trying to create a dynamic list where a person can add items, one line at the time, each line with the control to delete or add a new one.
My list would be of 10 items and the first one is always mandatory.
I managed to pull it off till the point where a user can add all 10 lines but if he tries to delete or something everything goes south... Can someone help me with this without jQuery?
I also created an example in JSFiddle but it doesn't work there... never the less he is the link: http://jsfiddle.net/Zx8hc/2/
Thank you very much in advance.
<html>
<head>
<title>Doc</title>
<style type="text/css">
#usersform {
display: table;
}
.divtr {
display: none;
}
.divtd {
display: table-cell;
padding-top: 10px;
}
#presUser_1 {
display: table-row!important;
}
</style>
<script type="text/javascript">
function addUsersForm(x) {
var y = "presUser_" + x;
var z = "addUserButton_" + (x - 1);
var t = "removeUserButton_" + (x - 1);
document.getElementById(y).style.display = "table-row";
document.getElementById(z).style.display = "none";
document.getElementById(t).style.display = "inline-block";
}
function removeUsersForm(x) {
var y = "presUser_" + x;
document.getElementById(y).style.display = "none";
}
</script>
</head>
<body>
<div id="usersForm">
<div class="divtr" id="presUser_1">
<div class="divtd">Age <input type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_2">
<div class="divtd">Age <input class="textAge" name="page_2" id="page_2" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_3">
<div class="divtd">Age <input class="textAge" name="page_3" id="page_3" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_4">
<div class="divtd">Age <input class="textAge" name="page_4" id="page_4" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_5">
<div class="divtd">Age <input class="textAge" name="page_5" id="page_5" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_6">
<div class="divtd">Age <input class="textAge" name="page_6" id="page_6" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_7">
<div class="divtd">Age <input class="textAge" name="page_7" id="page_7" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_8">
<div class="divtd">Age <input class="textAge" name="page_8" id="page_8" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_9">
<div class="divtd">Age <input class="textAge" name="page_9" id="page_9" type="text"></div>
<div class="divtd">
Add
Delete
</div>
</div>
<div class="divtr" id="presUser_10">
<div class="divtd">Age <input class="textAge" name="page_10" id="page_10" type="text"></div>
<div class="divtd">
Delete
</div>
</div>
</div>
</body>
</html>
========================
EDIT
More explanations... What I mean is that if a person starts to delete rows but not in the right order the "add" button disappears, or the rows can be added only a "limited" number of times, weird stuff if you try to find it's tickles you will discover. I was just asking if you guys with experience in this stuff can tell me a more easy way to do this, because I bet there is one.
When you add all 10 lines the "add" button disappears, but if there are added less than 10 lines there should be the add button on the last of the lines, right?
Also, when adding / deleting I notice some of the lines will simply not want do disappear...

Here's a fiddle to dynamically add and remove objects from a list: http://jsfiddle.net/Zx8hc/6/
The addUsersForm function adds a new element, assigns a new id and adds it and appends it to the form.
Something to note here is this:
this.id = this.id || 2; //Starts with 2, because the existing element has id 1
This is a useful thing to remember:) This says that you either set this.id to itself (not changing the value), or if it's undefined, you set it to 2 (the starting value). At the end you increase the id value by one. By using this, you store this on the function itself, rather than creating a new variable each time the function is run.
The removeUsersForm function takes in an id, and removes that element.
Update: This is a better fiddle: http://jsfiddle.net/Zx8hc/9/. This works by encapsulating the page controls in a controller object.

New Fiddle
This is a quick example to show you how to accomplish a similar effect with AngularJS. My Angular is not perfect, but it should suffice to show that you do not need all the repetition of HTML, nor do you have to manually specify JS target IDs.
Note: my previous answer was a little hasty as I take it you're new to web development and could have used a much more helpful response.