We Keep Coding

Get the <div> outside of this <div>

I would like to get the second div (total-price), instead of the first div.
Additionally I would like to add a $ sign to the div, yet when it tries to convert the data into an Int, obviously "$" will cause an error.
I have a work around method for this, but is there anyway to concatenate the $?
Many thanks.
<!-- Product #1 -->
<div class="item">
<div class="quantity">
<button class="plus-btn" type="button" name="button">
</button>
<div class="total-price">22</div> <!--I dont want this one -->
</div>
<div class="total-price">22</div> <!--I want to access this div -->
</div>
JQuery
$('.plus-btn').on('click', function(e) {
e.preventDefault();
//Increase cost
var $this = $(this);
var $cost = $this.closest('div').find('div');
var costValue = parseInt($cost.html());
costValue += costValue;
$cost.html(costValue);
});

$('.plus-btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $cost = $this.closest('.quantity').siblings('.total-price');
var costValue = parseInt($cost.html());
costValue += costValue;
$cost.html(costValue);
});

The closest('div') to the button is the div you don't want.
You can simply traverse one level up the DOM tree and to the parent div and find '.total_price' in its sibling.
$('.plus-btn').on('click', function(e) {
e.preventDefault();
var $this = $(this);
var $cost = $this.parent().siblings('.total-price');
var costValue = parseInt($cost.html());
costValue += costValue;
$cost.html(costValue);
});

How can I get the innerHTML of a text that is overwritten with javascript

HTML:
<div class="col answer">
some text
</div>
js:
$(".answer").text("Here we change the text" );
$(".answer").click(function(E) {
console.log(E).html();
});
console output : undefined

You need to use $(this).html() not (E).html(). Your code should look like this:
console.log($(this).html());
Demonstration:
$(".answer").text("Here we change the text");
$(".answer").click(function() {
console.log($(this).html());
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div class="col answer">
some text
</div>

Since this was also posted in Javascript here's a vanilla option to do the same:
<div class="col answer">
some text
</div>
<script>
var x = document.getElementsByClassName("answer");
var y;
for (y = 0; y < x.length; y++) {
x[y].innerHTML = "Here we change the text";
}
window.onload = function() {
document.addEventListener('click', function (event) {
var target = event.target;
if(target.matches('.answer')){
console.log(target.innerHTML);
}
}, false);
}
</script>

Do you need innerHTML or text?? If you need text use .text() method.
$(".answer").text("Here we change the text" );
$(".answer").off().on('click',function() {
console.log($(this).html());
});

Change text value in html after append

I create a button with append
var row = '<tr><td><button class="directly-follow btn" text="Follow">Follow</button></td></tr>';
$('.textWord_about> table > tbody').append(row);
I want to change the button text using jquery, by clicking on the button.
This is what am I doing:
$(document).on('click', '.directly-follow', function() {
event.preventDefault();
var $post = $(this);
if ($post.attr("text") == "Follow") {
$post.text('Unfollow');
//do something
}
else{
$post.text('Follow');
//do something
}
the problem is that the line $post.text('Unfollow') changes the button text but it does not change the defined text in the html tag(text="Follow"). As a result, the functionality does not toggle as I want.(the if is always true!).
How can change the text using jquery?

To change the value of a custom attribute you have to use attr method.
attr method can be used in order to get the attribute value, but also to set the attribute value.
The method gets the value of an attribute for the first element in the set of
matched elements or sets one or more attributes for every matched
element.
$(document).on('click', '.directly-follow', function() {
event.preventDefault();
var $post = $(this);
if ($post.attr("text") == "Follow") {
$post.text('Unfollow');
$post.attr('text','Unfollow');
}
else{
$post.text('Follow');
$post.attr('text','Follow');
}

Use attr instead of text.
http://api.jquery.com/attr/
var row = '<tr><td><button class="directly-follow btn" text="Follow">Follow</button></td></tr>';
$('.textWord_about> table > tbody').append(row);
$(document).on('click', '.directly-follow', function() {
event.preventDefault();
if ($(this).attr("text") == "Follow") {
$(this).text('Unfollow');
$(this).attr('text','Unfollow');
}
else{
$(this).text('Follow');
$(this).attr('text','Follow');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textWord_about">
<table>
<tbody>
</tbody>
</table>
</div>

You should use .data() to retreive a custom attribute (which should begin with "data-").
Then, a button has no text()... But has html(), for the text displayed on it.
$(document).on('click', '.directly-follow', function() {
event.preventDefault();
var $post = $(this);
if ($post.data("text") == "Follow") {
$post.html('Unfollow');
$post.data("text","Unfollow");
//do something
}
else{
$post.html('Follow');
$post.data("text","Follow");
//do something
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button class="directly-follow btn" data-text="Follow">Follow</button>
</td>
</tr>
</table>

I think you want like this :
Fiddle
var row = '<tr><td><button class="directly-follow btn" text="Follow">Follow</button></td></tr>';
$('.textWord_about> table > tbody').append(row);
$(document).on('click', '.directly-follow', function(event) {
event.preventDefault();
var $post = $(this);
console.log($post.attr("text"))
if ($post.attr("text") == "Follow") {
$post.text('Unfollow');
$post.attr("text","Unfollow")
//do something
}
else{
$post.text('Follow');
$post.attr("text","Follow")
//do something
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='textWord_about'>
<table>
<tbody></tbody>
</table>
</div>
<div class='directly-follow'>
</div>

how to make an event happen when click a button on HTML by using javascript

I am trying to make HTML print out "Germany" when you click the button. But it is not working correctly. Is there something wrong in my code?
HTML
<input type="button" value="click!" onclick="shuffle();"/>
<div id="output"></div>
Javascript
(function(){
window.onload = function(){
alert("welcome to my trip record");
}
})();
var shuffle = function(){
var target = document.getElementById("output");
target.innerHTML = "Germany";
}

Remove the ; from your onclick
<input type="button" value="click!" onclick="shuffle()"/>

Try to use addEventListener for make event on button click
document.getElementById("myBtn").addEventListener("click", function(){
var target = document.getElementById("output");
target.innerHTML = "Germany";
});
here is the working jsfiddle:https://jsfiddle.net/jxjpzvvz/

You made two mistakes First mistake <input /> this is nothing. Second most common "function ();", the ";" Is wrong
Your corrected code
(function(){
window.onload = function(){
alert("welcome to my trip record");
}
})();
var shuffle = function(){
var target = document.getElementById("output");
target.innerHTML = "Germany";
}
<input type="button" value="click!" onclick="shuffle()"/>
<div id="output"></div>
I like to use DOM EventListener
window.onload = function(){
alert("welcome to my trip record");
}
document.getElementById("myBtn").addEventListener("click", function_t);
function function_t(){
var target = document.getElementById("output");
target.innerHTML = "Germany";
}
<input type="button" value="click!" id = "myBtn" >
<div id="output"></div>

<button id='btn_click' type="button">Click me!</button>
<div id="output"></div>
use button element for buttons, not input type button. we are not in the time of html 4.0 ;)
(function(){
window.onload = function(){
alert("welcome to my trip record");
}
})();
var shuffle = function(event){
var target = document.getElementById("output");
target.innerHTML = "Germany";
}
document.getElementById('btn_click').addEventListener('click', shuffle);
i'm fan of no js in the html tags directly, so i add a listener to the element

How add element to div in angularjs?

i want to add element to div in angularjs. so write this code but not work correctly. thanks for your help :)
function TestController($scope) {
$scope.addElement = function(){
var myElements = angular.element(document.querySelector('#form'));
console.log(myElements);
if(myElements.length == 0)
alert("Not Find");
else
myElements.prepend( myElements[0].children[1]);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController" id="form">
<input type="button" ng-click="addElement()" value="add"></input>
<div id="div">
<input type="text" name="name">
</div>
</div>

Here is what I have tried.
$scope.addElement = function(){
var myElements = angular.element(document.querySelector('#form'));
console.log(myElements)
console.log(myElements[0].children[1])
if(myElements.length == 0)
alert("Not Find");
else{
html = angular.element(myElements[0].children[1]).clone();
myElements.append( html);
}
You should use angular clone method.
EDIT.
Here it the Plunker

If I understood your question correctly, you want to append an input element to div on each ng-click?
You just need to target the div with jquery and append the element with it.
See example: http://jsbin.com/seyawemijo/edit?html,js,output

Often than not when you want to modify the DOM directly, there is a way to do it without.
"Thinking in Angular way"
function TestController($scope) {
$scope.textArr = [];
var count = 1;
$scope.addElement = function() {
var ele = {
model: 'hello ' + count++
}
$scope.textArr.push(ele);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController" id="form">
<input type="button" ng-click="addElement()" value="add" />
<div ng-repeat="text in textArr">
<input type="text" ng-model="text.model">
</div>
<div>{{textArr}}</div>
</div>

Try this one
myElements.prepend(myElements[0].children[1].value);

I have altered the above solution to add other attributes(including id) to the input text element
var globalCntr = 0;
function TestController($scope) {
$scope.addElement = function() {
globalCntr ++;
$('<input>',{
type:'text',
id:('inputText'+globalCntr)
}).appendTo($('#target'));
};
}