Show/hide angular element by condition - javascript

I built a feature adding "and zombies" to book names of choice, using basic angular.
<input type="text" ng-model="bookname" onclick="zombies()">
<h1> {{bookname}} </h1>
I want the "and zombies" (and the text inserted in the input) to be displayed only when there's text inside the input.
I tries this for starts, just to call the angular using JS and it doesn't work.
<script>
function zombies() {
document.getElementsByTagName("h1").innerHTML = "{{}}" + "and zombies";
};
</script>
How do I display the text when there's text inside the input?
(please go easy on me, I'm studying alone and you all started as juniors)

You Just need to add the condition which checks the value of bookname and display the static content with your name.
Like this -
<input type="text" [(ngModel)]="bookname" (click)="zombies()">
<h1> {{bookname}} <span *ngIf='bookname'>and zombies</span> </h1>

You can use a condition here.
<input type="text" [(ngModel)]="bookname" onclick="zombies()">
<h1 *ngIf="bookname"> {{bookname}} and zombies</h1>
Or if you want to use javascript:
<input type="text" ng-model="bookname" onclick="zombies()">
<h1 id="txtheading"></h1>
function zombies() {
var heading_value = document.getElementById("txtheading").value;
document.getElementById("txtheading").innerHTML = heading_value + " and zombies";
};

Easiest Solution you don't need onclick function ng-model will work itself.
AngularJs:
<input type="text" ng-model="bookname">
<h1>{{(bookname)? bookname+' and zombies' : bookname}}</h1>
Angular 2/4/5/6:
<input type="text" [(ngModel)]="bookname">
<h1>{{(bookname)? bookname+' and zombies' : bookname}}</h1>

Related

javascript add button with two input

I'm trying to write this in javascript without using jquery. It basically has two input field: author and quote, and on click should be added to the page.
I'm also trying to save it on the page in case I leave the page. The added quote disappears when i execute the method:
function radd() {
if((document.getElementById("q").value!="") && (document.getElementById("a").value!="")) {
$("#mid-wraper" ).append("<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>");
document.getElementById("q").value="";
document.getElementById("a").value="";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="but" onClick="radd()">Add</button>
<label for="q">Add ur Quote!</label><input id="q" name="q" />
<label for="a">The author name</label><input id="a" name="a" />
Try this
function radd()
{
if((document.getElementById("q").value!="")&& (document.getElementById("a").value!=""))
document.getElementById("mid-wraper").innerHTML += "<p class='left-bullet'>"+document.getElementById("q").value+"-<span class='yellow-heading'>"+ document.getElementById("a").value+"</span></p>";
document.getElementById("q").value="";
document.getElementById("a").value="";
}
function add(){
//create a new elem
var el=document.createElement("p");
//you can assign id, class , etc
el.id="yourcustomid";
el.textContent="yourcontent";
//then add to the wrapper
var wrapper=document.getElementById("mid-wrapper");
wrapper.appendChild(el);
}
This code shows you how to create a new paragraph and add it to your wrapper js...
You could also do something like this; far more easier in my opinion. Simply create both inputs, but set their attributes to hidden. And using javascript, delete the "hidden" attribute.
<button id="but" onClick="radd()">Add</button>
<input id="q" hidden="hidden" >Add ur Quote!</input>
<input id="a" hidden="hidden">The author name</input>
The JS part:
function radd(){
document.getElementById("q").removeAttribute("hidden");
document.getElementById("a").removeAttribute("hidden");
}

Angular js get div element issue

I am trying to get a div element value by ng-click but it comes an alert undefined.
my html is
<div ng-model='myName'>this is my name</div>
<br/>
<input type="button" value="Show Name" ng-click="showName()"/>
script is
$scope.showName = function(){
var nameOne = $scope.myName;
alert(nameOne);
}
How to solve this issue. Thank you.
ngModel directive can't be used with plain div (unless the element is a custom form control), see https://docs.angularjs.org/api/ng/directive/ngModel
<div ng-init="myName = 'this is my name'">{{ myName }}</div>
<br/>
<input type="button" value="Show Name" ng-click="showName()"/>
Plunker here
Edit: using ngInit outside of ngRepeat is considered a bad practice, initialize scope vars in the controller
$scope.myName = 'this is my name';
$scope.showName = function() {
alert($scope.myName);
}
<div>{{myName}}</div>
<br/>
<input type="button" value="Show Name" ng-click="showName()"/>
script is
$scope.showName = function(){
var nameOne = $scope.myName;
alert(nameOne);
}
Actually ng-model should be use on inputs.
<input type="text" ng-model="myName">
This Will create a $scope.myName var and bind it to the input content.
If you intitialize the myName in your javascript and want it to be displayed in this div you should use this syntax :
JS
$scope.myName = "Ben";
HTML
<div>This is my name : {{myName}}</div>
In both case your button click will not show undefined unless you didn't initialize it before the click (on the 2nd exemple).
Hope it helped.

How to dynamically generate html widgets using jQuery?

I have an interactive widget that I want to display on my page. However I also want to give the user the possibility to generate more instances of the same widget and to be able to interact with them simultaneously. As an example, let's say this is my widget:
<div id="my_widget">
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script>
$(document).ready(function() {
$("#up_one").click(function() {
$("#number").val(parseInt($("#number").val())+1);
});
});
</script>
<p>
<input type="submit" id="up_one" value="Up One!"/>
<input type="text" id="number" type="number" value="0" maxlength="2">
</p>
</body>
Now, to display this on my main page I use load(), as follows
$(document).ready(function() {
var i = 0;
$("#hello_submit").click(function() {
$("#hello_div").load("widget_test.html");
});
});
</script>
<div id="hello_div">
<p>
<input id="hello_submit" type="submit" value="New counter" />
</p>
</div>
But there are 2 problems with this. First I can only load the widget once, and second, it would allow the user to navigate directly to widget_test.html, which would defeat the purpose of all this. So I tried another method that involves turning the widget into a long string. To this string I add an index parameter which is used to dynamically generate id and class names, like this:
function BAString(){
this.getBas = function(value){
var bas = '<body><script>$(document).ready(function() {$("#up_one'+value+'").click(function() {\
$("#number'+value+'").val(parseInt($("#number'+value+'").val())+1);});}); </script> <p>\
<input type="submit" id="up_one'+value+'" value="Up One!"/>\
<input type="text" id="number'+value+'" type="number" value="0" maxlength="2"></p></body>';
return bas;
};
In my main page I then use this function:
$(document).ready(function() {
var i = 0;
$("#hello_submit").click(function() {
var b = new BAString();
$("#hello_div").append(b.getBas(i));
i++;
});
});
This second method seems to work great but I can see obvious problems with maintainability as my widget becomes more and more complex. So what is the ideal solution to be used in a case like this?
Well you can make it work with classes instead of Ids
that way you can add multiple widgets with the same function
$(document).ready(function() {
$(document.body).on( "click", ".up_one" ,function() {
$x = $(this).siblings('.number');
$x.val(parseInt($x.val())+1);
});
});
Here's a fiddle that works with just adding HTML
If you want to modify the widget in the future you could just load the external html instead of creating it

Grabbing value and appending to textarea with Javascript?

I'm stuck!
I have this simple form:
<p><input type="text" name="hometown" id="hometown" size="22" /></p>
<p><textarea name="comment" id="comment"></textarea></p>
What I need is to append the input value from #hometown to textarea! It mustn't replace text already written there. In the best case, it'd just print at the end of whatever is written on ''submit'' click.
This is how far I've got with my Javascript, but nothing seems to work.
function addtxt(input) {
var hometown = document.getElementById('hometown').value;
var obj=document.getElementById(comment)
var txt=document.createTextNode(lol)
obj.appendChild(txt)
}
Textarea has value property to operate with its contents. Just use += to append text:
document.getElementById("comment").value +=
document.getElementById("hometown").value;
Try this
var oldval=$('#comment').val();
var newval=$('#hometown').val();
S('#comment').val(oldval+' '+newval);
Here's an example for you I've put on JSFiddle, using pure javascript and the onClick listener
http://jsfiddle.net/vyqWx/1/
HTML
<input type="text" name="hometown" id="hometown" size="22" />
<textarea name="comment" id="comment"></textarea>
<input type="submit" onClick="doMagic();">
JS
function doMagic(){
var homeTown = document.getElementById("hometown").value;
document.getElementById("comment").value += homeTown;
}

echo text from input

I am trying to make a basic border radius generator. I have an input field for the user to type in the number of their choice as shown below:
<label>Border Radius:</label>
<input name="border-radius" class="jj_input" type="text" size="2" />
I then have an output area where I want the number they have typed in to appear before "px"
<div class="yourcode">
border-radius: *NUMBER_APPEARS_HERE*px;
</div>
Im not sure how to go about this, so could someone please point me in the right direction. Please also let me know if this has been answered already. Thanks in advance.
The input element has an onchange (or onkeyup) event that you can use. You can execute javascript inside that event that sets the innertext of your target div.
Onchange fires after validation (mostly this means when the user leaves the box). If you want to change directly after input, and only keyboard input is permitted, you can use a keydown/up event. In the example below onkeyup is used
<label>Border Radius:</label>
<input name="border-radius" class="jj_input" type="text" size="2" onkeyup = "document.getElementById('displaydiv').innerText = 'border-radius: ' + this.value + ' px'" />
<div class="yourcode" id="displaydiv">
border-radius: ..px;
</div>
A bit more elegant solution uses a separate span for the .. instead of replacing the entire text, but for demonstration purposes the above should suffice.
Got it working in the end:
<label>Border Radius:</label>
<input name="border-radius" id="jj_input" class="jj_input" type="text" size="2" value='' onkeyup='changeRadius()' />
<div class="yourcode">
border-radius: <span id="radius"></span>px;
</div>
<script type="text/javascript">
function changeRadius(){
var jj_input = document.getElementById('jj_input').value;
document.getElementById('radius').innerHTML = jj_input;
}
</script>

Categories

Resources