I have here a working code regarding arrays but i want my input to display in new lines not a single row. I have tried \n but no luck.
Here is my code:
<html>
<meta charset="UTF-8">
<head>
<title>Sample Array</title>
<script>var index = 0;</script>
</head>
<body>
Input:
<input type="text" id="input">
<input type="button" value="GO" onClick="press(input.value)">
<p id = "display">
<script>
var sample = new Array();
function press(Number)
{
if ( Number != '' )
{
sample[index] = Number;
document.getElementById("display").innerHTML += sample[index] + "\n";
index++;
}
else
alert("empty");
}
</script>
</body>
</html>
I want to code the newline within the document.getElementById. Thanks in advance.
You're dealing with HTML which treats most white space characters as a single space. Just concatenate a <br>:
document.getElementById("display").innerHTML += sample[index] + "<br>";
Related
So i am a beginner and i have an exercise that intructs the following:
Make a program that asks for a text and then prints the text several times. First with just one letter, then two, and so on. For example: the user enters "Thomas" and the strings "T", "Th", "Tho", "Thom", "Thoma", "Thomas" are printed.
We are supposed to work with javascript only, here is the code i have so far:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8" />
<title>Exercise </title>
</head>
<body>
<h1>Exercise </h1>
<!-- Form for alert button that shows result -->
<form>
<textarea id="mytext" rows="5" cols="20">Type here</textarea>
<input type="button" value="Print" onclick="printit()" />
</form>
<div id="translated" style="background-color: gray"></div>
<script>
//Function for getting the result and defining the 2 numbers
function printit()
{
var temptext = document.getElementById("mytext").value;
alert(temptext.length)
temptext = temptext.slice(0,0+1);
document.getElementById("translated").innerHTML=temptext;
for (var i = 0; i < temptext; i++)
{
temptext = temptext.slice(0,0+1);
document.getElementById("translated").innerHTML += temptext;
}
}
</script>
</body>
</html>
for(var i=0; i<data.length; i++){
console.log(data.substr(0,i+1));
}
where the data is the input get from user.
You want something like this?
Can anybody know how to make this code into recursion in javascript? i want to make a code that converts binary to decimal but uses recursion in javascript.
<html>
<head>
<title>Converting Binary to Decimal</title>
</head>
<style>
</style>
<body>
<div>
<input type="text" id="binary" />
<input type="submit" value="convert" onclick="convertBinary()" />
</div>
<script>
function convertBinary()
{
var binaryNumber = document.getElementById('binary').value;
binaryNumber = parseInt(binaryNumber,2);
var decimalNumber = binaryNumber.toString(10);
alert(decimalNumber)
}
</script>
</body>
What i did is a sort of character manipulation, but this will work dynamically and has also some sort of recursion.
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<div class="container">
<form>
<h4>Enter a binary value to convert into a decimal value.</h4>
Binary number : <input type="number" id="num1" onkeyup="bintodec(num1.value)"><br/><br/>
Result:<br/><br/>
<div id="res"></div>
</form>
<div>
</body>
<script type="text/javascript">
var tmp =0;
function bintodec(b){
len = b.length-1;
if(b.charAt(0)==0||b.charAt(0)==1){
if(b.charAt(0) == "1" && b != ""){
tmp = tmp + Math.pow(2,len);
}
display(b);
}
else{
tmp="Input may only contain ones and zeroes.";
display("");
}
}
function display(bn){
if(bn.slice(1) == ""){
document.getElementById('res').innerHTML=tmp;
tmp = 0;
}
else{
bn = bn.slice(1);
bintodec(bn);
}
}
</script>
</html>
Instead of PHP, I want to use jQuery to get user input and pass in a function and update a "div".
My HTML(includes scripts) code is:
<head>
<title>Mobile Locale test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Mobile Locale this is!" />
<script>
var x;
$(document).ready(function()
{
x = $("#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
console.log(x);
</script>
</head>
<body>
<form>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit">Submit!</button>
<div id="test">This should change...</div>
</form>
</body>
What I want:
I want to get input from user and assign that input to x.
Then I want to complete a string and pass x in that string.
Then I want to write that complete sentence in div id="test".
I am stumbling this for more than 6 hours but got no success. Tried numerous codes but failed.
Referred w3schools jQuery form example but they are using form method="abcd.asp".
Thanks in advance...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var x;
$(document).ready(function()
{
var x = $("input#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
function CallSubmit()
{
var x = $("input#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
return false;
}
</script>
</head>
<body>
<form>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit" onclick="return CallSubmit();">Submit!</button>
<div id="test">This should change...</div>
</form>
</body>
</html>
Your script is executed on page load, when the input is empty - call the code on an event, like keyup
$(document).ready(function(){
$("#q").keyup(function() {
var name = "Hello " + this.value + ". Welcome to this site";
$("#test").text(name);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit">Submit!</button>
<div id="test">This should change...</div>
You could get the name in the click event of the button.
Working example : http://jsfiddle.net/jjjoeupp/
$('#submit').on('click', function()
{
x = $("#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
Hope it helps!!!
You can bind the focusoutevent with the input to dynamically change the div. Another approach would be to update on each keypress.
$(document).ready(function () {
$('#q').keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
if ($(this).val() != '') {
var x = $(this).val();
var name = "Your string " + x;
}
$('#test').text(name);
}
});
});
fiddle : http://jsfiddle.net/86evwkbx/
i need a little help, figuring out my javascript output format
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>cleaner</title>
<script language="javascript" type="text/javascript">
function show (text){
var userInput = document.getElementById('textbox').value;
userInput = userInput.replace(/\W/g, '');
userInput = userInput.replace(/ /gi,", ");
document.getElementById('text').innerHTML = userInput;
}
</script>
</head>
<body>
<input type='textbox' name='textbox' id='textbox' value="Title Here"/>
<input type=button name=button value="OK" onClick="show()"/>
<div id="text"></div></body></html>
my input
& ^A % - _ ^ % clean* this$ keyword-
my result is
A_cleanthiskeyword
i want a result like this
a, clean, this, keyword
what should i add in my replace code?
thanks
Please check this code this will works for you
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>cleaner</title>
<script language="javascript" type="text/javascript">
function show ()
{
var userInput = document.getElementById('textbox').value;
var num = userInput.indexOf('A');
userInput = userInput.match(/[a-z]+/gi).join(", ").toLowerCase().replace(/ /g, '');
document.getElementById('text').innerHTML = userInput.substring(num-1);
}
}
</script>
</head>
<body>
<input type='textbox' name='textbox' id='textbox' value="Title Here"/>
<input type=button name=button value="OK" onClick="show()"/>
<div id="text"></div>
</body></html>
Here is link for JSFiddle for your code jsfiddle
Try this:
function show (text){
var userInput = document.getElementById('textbox').value;
userInput = userInput.match(/[a-z]+/gi).join(", ").toLowerCase();
document.getElementById('text').innerHTML = userInput;
}
I have here a working code that lets the user input something and it displays the output right away, but I want to create a function triggered by a button that would clear the output area itself. Is this possible with my code?
Here is my complete code:
<html>
<meta charset="UTF-8">
<head>
<title>Sample Array</title>
<script>var index = 0;</script>
</head>
<body>
Input:
<input type="text" id="input">
<input type="button" value="GO" onClick="press(input.value)">
<p id = "display">
<script>
var sample = new Array();
function press(Number)
{
if ( Number != '' )
{
sample[index] = Number;
document.getElementById("display").innerHTML += sample[index] + "<br>";
index++;
}
else
alert("empty");
document.getElementById('input').value = '';
}
</script>
</body>
</html>
Try this,
Javascript:
function Clean(){
document.getElementById('display').innerHTML='';
}
HTML:
<input type="button" value="Clean" onClick="Clean()"/>
Do this:
Notes:
-I have closed the P element.
-A new button was added "Clean" and you can use JQuery as it is shown below to clean the output (remember to have JQuery referenced in your page).
<html>
<meta charset="UTF-8">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title>Sample Array</title>
<script>var index = 0;</script>
</head>
<body>
Input:
<input type="text" id="input" />
<input type="button" value="GO" onClick="press(input.value)"/>
<input type="button" value="Clean" onClick="$('#display').html('');"/>
<p id = "display"></p>
<script>
var sample = new Array();
function press(Number)
{
if ( Number != '' )
{
sample[index] = Number;
document.getElementById("display").innerHTML += sample[index] + "<br>";
index++;
}
else
alert("empty");
document.getElementById('input').value = '';
}
</script>
</body>