Adding Font + Feature to Textarea - javascript

I'm trying to create a feature for the Script Encoder that I'm creating that will increase the font size of the textarea by one. This is what I got so far:
<script type="text/javascript">
var size=10 + "px";
var size2=10;
function add(){
size2++;
size=size2+"px";
}
if(typeof size2=="undefined"){size2="10";}
$('#panel').html("<form method='post' name='pad' align='center'><textarea class='look' rows='11' id='code1' style='font-size:"+size+";' name='text' cols='58'></textarea><br></form>")
</script>
<div id="panel"></div>
<br />
<input type="button" value="Font+" name="fontAdd" onclick="add();">
The problem is that the Textarea is not showing.

I ammended your solution here:
http://jsfiddle.net/H2J9Y/2/
The only 'gotcha' is that if there is text in the textbox when the size of the text is increased, it doesn't really stay inline properly until you start typing again. You'll see what I mean, but hopefully that's solved your main problem.
Edit: A bit of padding makes the issue a lot less noticable
http://jsfiddle.net/H2J9Y/3/

Try this instead
<div id="panel"></div>
<br>
<input type="button" value="Font+" name="fontAdd" id="fontAdd">
I added an id="fontAdd" and then referenced via click()
$('#fontAdd').click(function(){
size2++;
size=size2+"px";
if(typeof size2=="undefined"){size2="10";};
$('#panel').html("<form method='post' name='pad' align='center'><textarea class='look' rows='11' id='code1' style='font-size:"+size+";' name='text' cols='58'></textarea><br></form>");
});
Also, you were missing a few ;
Example: http://jsfiddle.net/jasongennaro/n3jGK/
**Keep clicking the font + button to see the increase.

Related

How to change textarea value dynamically?

I got a problem in updating the value within <textarea> tags. The procedure is like this, there is an initial value inside textarea, then the user changes it. If I want to use a js script (implemented by a button) to modify the value further, it does not work at all. However, if we do nothing on the textarea, the button works perfectly. So weird to me. Could anyone shed any light on this? The code is posted below.
$(document).ready(function() {
$("#mybutton").click(function() {
var mystring = "The previous textarea value is <br><em>" + $("#myarea").val() + "</em>";
$("#myarea").html("Star wars"); // this line doesn't work after editting the textarea but works if you do not edit anything, why?
$("#placeholder").html(mystring);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div>Input whatever you want</div>
<textarea id="myarea" style="width: 300px; height: 70px">Initial text</textarea>
<div>
<button id="mybutton">Click after editing</button>
<br> The button is supposed to change the text to <em>Star wars</em>.
</div>
<div id="placeholder"></div>
</body>
$(document).ready(function() {
$("#mybutton").click(function() {
var mystring = "The previous textarea value is <br><em>" + $("#myarea").val() + "</em>";
$("#myarea").val("Star wars"); //The changes have to be made on this line
$("#placeholder").html(mystring);
});
});
Inorder to change the value of textarea use val() , instead of html().

HTML - Button is cancelled only after second click

I have a very simple code: I want to cancel a button after it's clicked to display something else. I tried this way
HTML:
<div id="container">
<input type="button" value="New game" onclick="newGame()" />
</div>
js:
function newGame() {
var container = document.getElementById("container");
container.removeChild(container.childNodes[0]);
}
What happens is the button gets cancelled only if I click it two times. Where did I get wrong?
I'm sorry if this is a repost, I tried to check but didn't find a quetion identical to mine
It appears as if your code is going to remove the button once you click on it. Is this correct, or are we not looking at the full markup?
If you remove \n (i.e new line) your code will work
try like this
function newGame() {
var container = document.getElementById("container");
debugger;
container.removeChild(container.childNodes[0]);
}
<div id="container"><input type="button" value="New game" onclick="newGame()" /></div>
The reason why your code is not working is, when you hit enter after div, HTML DOM will automatically creates one dummy text node as it's child. hence your input node became the second child for your container.
Working fiddle
Hope it helps :)
try this:
function newGame() {
var container = document.getElementById("container");
// change 0 to 1
container.removeChild(container.childNodes[1]);
}
container.childNodes[0] is a text Node, in which the text is Newline
I gave id to the button and removed it using id.
In your case it is not removing in first time because container.childNodes[0] in first time is not a button. Try your self using console.log in your function.
function newGame() {
var container = document.getElementById("container");
var d_nested = document.getElementById("button_1");
var throwawayNode = container.removeChild(d_nested);
//container.innerHTML='';
}
<div id="container">
<input id="button_1" type="button" value="New game" onclick="newGame()" />
</div>
Alternatively, you could do this:
<div id="container">
<input type="button" value="New game" onclick="document.getElementById('container').removeChild(this);" />
No separate JS file needed.

How to show and close form on click of a div?

When a div is clicked I want to show a form, as done on this page. This is what I have tried (fiddle):
$(document).on("click","#tawkchat-minified-container",function() {
var htmldynamic = ' <form id="test" action="test.php">\
<div>\
Test: <input name="blah" value="test" type="text">\
</div>\
</form>'
$("#maximizeChat").html(htmldynamic);
});
I don't know if this is the right way to do it. Is there a better approach?
Adding large chunks of HTML as JavaScript variables is not good practice. It is easy to make errors in the HTML as you have to read it awkwardly embedded in the JS.
A better approach is to include the HTML code with the rest of your markup, but use CSS to hide it. Then you can just show it using JavaScript when it is pressed.
HTML:
<div id="my-form-container">
<div id="my-form-header">My form</div>
<form id="my-form" action="test.php">
<div>
Test: <input name="blah" value="test" type="text">
</div>
</form>
</div>
CSS:
#my-form {
display: none; /* This will hide the form. */
}
JavaScript:
//When the container is clicked...
$("#my-form-container").click(function() {
//...show the form.
$("#my-form").show();
});
Use this approach will definitely solve your problem
$(document).ready(function(){
$("#tawkchat-minified-agent-container").click(function()
var hlink = $("#test").val();
$("#test").click(function(){
$(".form").show()
});
});
});

How to get the value with getElementById in a class and use it in a different class

<body>
<div class="container">
Input
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="getString" placeholder="Enter some string">
</div>
<button type="button" class="btn btn-primary" id="nowBtn">Now</button>
</form>
<br/>
<br/>
All Headings<textarea class="form-control" rows="6"></textarea>
</div>
</body>
I am using bootstrap and I will give some string in the form, when the Now button is pressed.
I should get the <h1> tag of that string in the textarea (i.e <h1>some string</h1> in the textarea with applied <h1> tag ).
Is it achievable? I want to use jQuery.
From your comments I've understood you'd like to set the font-size in the textarea to same size as h1 tag would have.
Since there's no h1 tag in your HTML, you need to create a one in the click event handler function of the #nowBtn:
var header = document.createElement('h1'),
size = window.getComputedStyle(header, null).fontSize; // Depending used browser and CSS, this returns for example 32px
Then you can set the font-size of textarea like this:
$('textarea').css('font-size', size);
A live demo at jsFiddle.
EDIT
As bfavaretto has mentioned, a cross-browser way would be to use jQuery to get the size of the h1:
size = $(header).css('font-size');
Have a look at this fiddle - it might be what you want.
http://jsfiddle.net/Nj7pj/
$(document).ready(function () {
$('.btn-primary').on('click', function () {
inputVal = $('#getString').val();
newTextAreaVal = "<h1>" + inputVal + "</h1>";
$('textarea').val(newTextAreaVal);
});
});
I think you can do
var h1 = $("h1.classYouWant");
$(".form-control").val( "<h1>" + h1.text() + "</h1>" );
if is dynamic the header (h1 or h2 or h3 )
you can do
var header = $(".classYouWant").get(0);
$(".form-control").val( header.outerHTML );

Not knowing how to position the output of Javascript in an HTML page

I am a javascript beginner . I am working on a wordsmith game that display's a clue (on the roll of a dice ) to a word . now i need to display the blank spaces of the word and a clue below it . I am not knowing hot to display the content to the place i want in the page ???
<html>
<head>
<script type="text/javascript">
form1= document.forms[0];
function display()
{
words=new Array("Elephant","Tiger","Panther","Giraffe","Zebra","Anaconda");
phrases=new Array("Largest Land Mammal","Striped Animal moving towards Extinction","Found in the Amazon Jungle","Found in Africa","It helps us Cross","Very Dangerous Reptile");
count = words[i].length;
while(count>0)
{
document.write("__")//to display the word with blank spaces
document.write(""); // space in between characters
count--;
}
}
function show_dice()
{
randomnumber=Math.floor(Math.random()*6);
i=randomnumber;
randomnumber = randomnumber + 1;
document.getElementById("myButton1").value=randomnumber;
document.getElementById("myButton1").disabled="disabled";
}
</script>
<link rel="stylesheet" type="text/css" href="keyboard.css">
</head>
<body>
<form>
<input type="button" id = "myButton1" name ="Button1" onclick="show_dice()" value="Click the Dice!!!">
<h1>Enter Your Guess For the Word Below</h1>
<h2> Clue to the Word is :</h2>
<input type="text" value="" class="keyboardInput">
</form>
</body>
</html>
Just for start, you could to create a <input type=text id=clue /> and to edit it's content by running
document.getElementById("clue").value= "___";
Later, you can to create a <div> and alter it's content through .innerHTML property;
Instead of answering your question I'll recommend reading W3C DOM -Introduction on quirksmode.org. It explains the "why" of Rubens' answer and gives you knowledge to solve similar problems in the future.

Categories