Develop Reference

When I click on a button, I want to show an element only if another element contains a specific text

So as an example, when I click on the button (class="button"), it will show class="test2" if class="test1" contains the text "Select".
<input class="button" type="button" value="Button"></input>
<div class="test1">Select</div>
<div class="test2">12345</></div>

<div class="test1">Select</div>
<div class="test2" hidden>12345</div>
<div class="test1">Select</div>
<div class="test2" hidden>54321</div>
<div class="test1">hide</div>
<div class="test2" hidden>67890</div>
<input class="button" type="button" value="Button"></input>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$('.button').on('click',function(){
$.each($('.test1'), function(key, value){
var tdValue = $(value).text();
console.log(value, key);
if (tdValue == 'Select'){
$(value).next('.test2').show();
$(value).hide();
}else{
$(value).next('.test2').hide();
$(value).hide();
}
});
});
</script>

<div class="test1">Select</div>
<div class="test2" hidden>12345</div>
<input class="button" type="button" value="Button"></input>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
$('.button').on('click',function(){
var tdValue = $('.test1').text();
if (tdValue === 'Select'){
$('.test2').show();
$('.test1').hide();
}else{
$('.test2').hide();
$('.test1').hide();
}
});
</script>

how to call a javascript function whenever an html code loads

function addMore() {
$("<div>").load("m_text.php", function() {
$("#product").append($(this).html());
});
}
the below html code with flate_rate function is in m_text.php
<div class="float-leftt"><input type="number" name="saleable_area[]" id="isalable_area[]" placeholder="Salable Area" /></div>
<div class="float-leftt"><input type="number" name="flat_rate[]" id="iflat_area[]" placeholder="Flat Rate"/ onkeyup="flat_rate()"></div>
<div class="float-leftt"><input type="number" name="flat_cost[]" id="iflat_cost[]" placeholder="Flat Cost"/></div>
<script type="text/javascript">
function flat_rate(){
var salable_area = document.getElementById("isalable_area[]");
var flat_area = document.getElementById("iflat_area[]");
var flat_cost=[];
var i=0;
flat_cost[0] = salable_area.value*flat_area.value;
alert( flat_cost[0]);
document.getElementById("iflat_cost[]").value=(flat_cost[0]);
}
</script>
add more code
<input type="button" id="add_button" name="add_item" value="Add More" style="width:15%;" onClick="addMore();"/>
this code works properly when the html code runs first time. when user click on add more button this html code loads again at that time the calaculated value doesnt appear in flat cost .
If i use class instead of id then it shows NaN in output.
please help me. thank you

According to your example code, you can try this:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
function addMore() {
$("#product").append($("div.block").html());
}
</script>
<div id="product">
<div class="block">
<div class="input">
<div class="float-leftt"><input type="number" name="saleable_area[]" id="isalable_area[]" placeholder="Salable Area" /></div>
<div class="float-leftt"><input type="number" name="flat_rate[]" id="iflat_area[]" placeholder="Flat Rate"/></div>
<div class="float-leftt"><input type="number" name="flat_cost[]" id="iflat_cost[]" placeholder="Flat Cost"/></div>
</div>
add more code
<input type="button" id="add_button" name="add_item" value="Add More" style="width:15%;" onClick="addMore();"/>
</div>
</div>
<script>
$("#product").on('keyup', "[name='flat_rate[]']", function(){
var salable_area = $(this).parents("div.input").find("[name='saleable_area[]']");
var flat_area = $(this);
var flat_cost=0;
flat_cost = salable_area.val()*flat_area.val();
alert( flat_cost);
$(this).parents("div.input").find("[name='flat_cost[]']").val(flat_cost);
});
</script>
If you want to load file, you can take <div class="block">...</div> block to your file, then modify the add-more function:
$.get( "m_text.php", function( data ) {
$("#product").append(data);
});

Adding input value from a form to an ul

I have a user input under a form, and I am trying to get the input to be added as a li under an ul. This is my code so far:
var button = document.querySelector("#lagre");
var reminderList = document.querySelector("#reminderList");
var input = document.forms.reminderForm.reminder;
button.addEventListener("click", function(e) {
e.preventDefault();
//console.log(input.value);
});
<main class="container">
<div class="reminderContainer">
<div class="left">
<h1>Min huskeliste</h1>
<ul id="reminderList">
</ul>
</div>
<div class="right">
<form action="#" name="reminderForm">
<div class="reminderInput">
<label for="reminder">Jeg må huske...</label>
<input autofocus type="text" name="reminder">
</div>
<input id="lagre" type="submit" name="submit" value="Lagre">
</form>
</div>
</div>
</main>
<script type="text/javascript" src="script.js"></script>

button.addEventListener("click", function(e) {
e.preventDefault();
var li = document.createElement("li"); // create an li
li.textContent = input.value; // set its text content to input's value
reminderList.appendChild(li); // add it to the ul
});
Example:
var button = document.querySelector("#lagre");
var reminderList = document.querySelector("#reminderList");
var input = document.forms.reminderForm.reminder;
button.addEventListener("click", function(e) {
e.preventDefault();
var li = document.createElement("li"); // create an li
li.textContent = input.value; // set its text content to input's value
reminderList.appendChild(li); // add it to the ul
});
<main class="container">
<div class="reminderContainer">
<div class="left">
<h1>Min huskeliste</h1>
<ul id="reminderList">
</ul>
</div>
<div class="right">
<form action="#" name="reminderForm">
<div class="reminderInput">
<label for="reminder">Jeg må huske...</label>
<input autofocus type="text" name="reminder">
</div>
<input id="lagre" type="submit" name="submit" value="Lagre">
</form>
</div>
</div>
</main>

Try this https://jsfiddle.net/tLx48h5L/
It pass the value to a function and create options inside the ul with the value of the input.
function createLis(option){
var template = "<option>"+option+"</option>";
var content = document.querySelector("#reminderList").innerHTML;
document.querySelector("#reminderList").innerHTML = content + template;
}
Cheers

You can select your reminder input element:
var reminderValue = document.querySelector("#reminder");
And add it's value to your li element
reminderList.innerHTML = reminderValue.value;
var button = document.querySelector("#lagre");
var reminderList = document.querySelector("#reminderList");
var reminderValue = document.querySelector("#reminder");
var input = document.forms.reminderForm.reminder;
button.addEventListener("click", function(e) {
e.preventDefault();
reminderList.innerHTML = reminderValue.value;
//console.log(input.value);
});
<main class="container">
<div class="reminderContainer">
<div class="left">
<h1>Min huskeliste</h1>
<ul id="reminderList">
</ul>
</div>
<div class="right">
<form action="#" name="reminderForm">
<div class="reminderInput">
<label for="reminder">Jeg må huske...</label>
<input autofocus type="text" name="reminder" id="reminder">
</div>
<input id="lagre" type="submit" name="submit" value="Lagre">
</form>
</div>
</div>
</main>
https://jsfiddle.net/4wfrkvxs/

Check plz this solution.
var button = document.querySelector("#lagre");
var reminderList = document.querySelector("#reminderList");
var input = document.forms.reminderForm.reminder;
button.addEventListener("click", function(e) {
e.preventDefault();
var li = document.createElement('li');
li.innerText = document.getElementById('reminder').value;
document.getElementById('reminderList').appendChild(li);
});
<main class="container">
<div class="reminderContainer">
<div class="left">
<h1>Min huskeliste</h1>
<ul id="reminderList">
</ul>
</div>
<div class="right">
<form action="#" name="reminderForm">
<div class="reminderInput">
<label for="reminder">Jeg må huske...</label>
<input autofocus type="text" id="reminder" name="reminder">
</div>
<input id="lagre" type="submit" name="submit" value="Lagre">
</form>
</div>
</div>
</main>
<script type="text/javascript" src="script.js"></script>

adding a textbox element dynamically to a form by AngularJS

How can we add a textbox element to a form dynamically using AngularJs. For example in this case, I have a text and textbox which I want to add one other of this pair by clicking on a button using AngularJs.
<div ng-app>
<div ng-controller="ClickToEditCtrl">
<div ng-hide="editorEnabled" ng-click="editorEnabled=true">
{{title}}
</div>
<div ng-show="editorEnabled">
<input ng-model="title">
<button href="#" ng-click="editorEnabled=false">Done editing</button>
</div>
</div>
</div>
<div>
<input type="text" placeholder="Enter answer">
</div>

I implemented it myself. You could dynamically add an element by using ng-repeat in a
<li ng-repeat="elemnt in questionelemnt">
Here it is the Demo: fiddle

js file
$scope.choices = [{id: 'choice1'}, {id: 'choice2'}, {id: 'choice3'}];
$scope.addNewChoice = function() {
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice' +newItemNo});
};
$scope.showAddChoice = function(choice) {
return choice.id === $scope.choices[$scope.choices.length-1].id;
};
html
<div class="form-group" data-ng-repeat="choice in choices">
<label for="choice" ng-show="showChoiceLabel(choice)">Choices</label>
<button ng-show="showAddChoice(choice)" ng-click="addNewChoice()">Add another choice</button>
<input type="text" ng-model="choice.name" name="" placeholder="Enter a restaurant name">
</div>

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ol>
<li ng-repeat="element in elements">
<input type="text" ng-model="element.value"/>
</li>
</ol>
<br/>
<b>Click here to add Textbox:</b><br/><input type="button" value="New Item" ng-click="newItem()"/>
<br/>
<br/>
<b>Click here to see ng-model value:</b><br/>
<input type="button" value="submit" ng-click="show(elements)">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var counter=0;
$scope.elements = [ {id:counter, value : ''} ];
$scope.newItem = function(){
counter++;
$scope.elements.push( { id:counter,value:''} );
}
$scope.show=function(elements) {
alert(JSON.stringify(elements));
}
});
</script>
</body>
</html>

How to put multi JavaScript function in a page?

Here is again the full code i Use but without css, i only want to run these 2 javascripts, can anyone send me the full code edited?
here is my demo page http://iscree.orgfree.com
Here i have jquery-1.4.2.js but it works to both codes when they are in Specify pages, not same page!
<script type="text/javascript" src="http://www.iscreen.orgfree.com/js/jquery-1.4.2.js"></script>
<style type="text/css">a {text-decoration: none}</style>
<!Here is js1---------->
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#content').toggle('show');
});
});
});//]]>
</script>
<!Here is js1---------->
<!Here is js2---------->
<script type='text/javascript'>//<![CDATA[
$(windows).load(function(){
// Optional code to hide all divs
$("div").hide();
// Show chosen div, and hide all others
$("input").click(function ()
{
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
});//]]>
</script>
<!Here is js2---------->
<!Here example1---------->
Click a button to make it visible:<br /><br />
<input type="button" value="One" class="one" />
<input type="button" value="Two" class="two" />
<input type="button" value="Three" class="three" />
<input type="button" value="Four" class="four" /><br /><br />
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<div id="four">Four</div><br/><br/>
<!Here example1---------->
<!Here example2---------->
<a href="#" id='hideshow'>here</a>
<div id='content' class="content" style="display: none;">
<div id="container" style="width:300px">
<div id="title" style="background-color:#161616;">
<center><h1 style="margin-bottom: 0; color: white;">iScreen Desktop</h1></center>
</div>
<div id="row1left" style="background-color:#636262;height: 150px;width:150px;float:left;">
<center>Some text</center>
</div>
<div id="row1right" style="background-color:#161616;color: white;height: 150px;width:150px;float:left;">
<p>Content goes here</p>
</div>
<div id="row2left" style="background-color:#636262;height: 60px;width:150px;float:left;">
<center><form name="tokey"><input type="text" name="key" onblur="if (this.value == '') {this.value = 'Kerko';}" onfocus="if(this.value == 'Kerko') {this.value = '';}" value="Kerko" size="10"><input type="button" onClick="ToKey()" value="Go"></form></center>
</div>
<div id="row2right" style="background-color:#161616;color: white;height: 55px;width:150px;float:left;">
<center><img src="./users/desktop/img/shdown.png" height="19" width="19"> <font size="5" style="color: white">Shkyqu</font></center>
</div>
<div id="footer" style="background-color:#161616;color: white;clear:both;text-align:center;">
By SMKproduction.eu5.org</div>
</div>
</div>
<!Here example2---------->

Simply put them in document.ready
$(document).ready(function () {
jQuery('#hideshow').live('click', function (event) {
jQuery('#content').toggle('show');
});
$("div").hide();
$("input").click(function () {
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
});

Why you don't just put all the code inside the same "ready" call?:
<script type="text/javascript">
$(document).ready(function(){
$('#hideshow').live('click', function(event) {
$('#content').toggle('show');
});
$("div").hide();
// Show chosen div, and hide all others
$("input").click(function ()
{
$("#" + $(this).attr("class")).show().siblings('div').hide();
});
});
</script>
Beware that window.load and jQuery.ready has the same purpose: to execute the functio when the browser has finished loading the document. You don't need both of them...