I have a textarea and 3 buttons and I need to align text with this 3 buttons: left, center, right
<button type="button" onclick="myFunction()">LEFT</button>
<script>
function myFunction() {
document.getElementById("myP").style.textAlign = "left";
}
</script>
<button type="button" onclick="myFunction()">CENTER</button>
<script>
function myFunction() {
document.getElementById("myP").style.textAlign = "center";
}
</script>
<button type="button" onclick="myFunction()">RIGHT</button>
<script>
function myFunction() {
document.getElementById("myP").style.textAlign = "right";
}
</script>
<textarea name="textarea" id="myP" rows="10" cols="40"></textarea>
</div>
function myFunction(align) {
document.getElementById("myP").style.textAlign = align;
}
<button type="button" onclick="myFunction('left')">LEFT</button>
<button type="button" onclick="myFunction('center')">CENTER</button>
<button type="button" onclick="myFunction('right')">RIGHT</button>
</script>
<textarea name="textarea" id="myP" rows="10" cols="40"></textarea>
</div>
Related
The clear() function in this code is not running when I press the "C" button (i.e. it isn't even printing to console) even though all the other buttons work fine. I'm sure I've missed something obvious but I cannot see it. Please help me find it:
<html>
<head>
<script type="text/javascript">
var total = 0;
function add(x) {
total += x;
document.getElementById('total').innerHTML = total;
}
function clear() {
console.log('cleared');
var total = 0;
document.getElementById('total').innerHTML = 0;
}
</script>
</head>
<body>
<p id="total">0</p>
<p>
<button type="button" onclick="add(1)">1</button>
<button type="button" onclick="add(2)">2</button>
<button type="button" onclick="add(3)">3</button><br>
<button type="button" onclick="add(4)">4</button>
<button type="button" onclick="add(5)">5</button>
<button type="button" onclick="add(6)">6</button><br>
<button type="button" onclick="add(7)">7</button>
<button type="button" onclick="add(8)">8</button>
<button type="button" onclick="add(9)">9</button><br>
<button type="button" onclick="clear()">C</button>
</p>
</body>
</html>
window.document.clear is Native API hence function clear() is shadowed, Use some other function name.
<html>
<head>
<script type="text/javascript">
var total = 0;
function add(x) {
total += x;
document.getElementById('total').innerHTML = total;
}
function clearVal() {
console.log('cleared');
total = 0;
document.getElementById('total').innerHTML = 0;
}
</script>
</head>
<body>
<p id="total">0</p>
<p>
<button type="button" onclick="add(1)">1</button>
<button type="button" onclick="add(2)">2</button>
<button type="button" onclick="add(3)">3</button><br>
<button type="button" onclick="add(4)">4</button>
<button type="button" onclick="add(5)">5</button>
<button type="button" onclick="add(6)">6</button><br>
<button type="button" onclick="add(7)">7</button>
<button type="button" onclick="add(8)">8</button>
<button type="button" onclick="add(9)">9</button><br>
<button type="button" onclick="clearVal()">C</button>
</p>
</body>
</html>
Note: You are initializing variable total in clearVal function, not redefining it as 0, remove keyword var to update global variable.
Not suggested but hacked way to do it and freaking cooool:
window.document.clear is Native API hence function clear() is shadowed
But if you still want to keep the clear function name, you can also
override the window.document.clear a function like shown below.
<html>
<head>
<script type="text/javascript">
var total = 0;
function add(x) {
total += x;
document.getElementById('total').innerHTML = total;
}
window.document.clear = function() {
console.log('cleared');
total = 0;
document.getElementById('total').innerHTML = 0;
};
</script>
</head>
<body>
<p id="total">0</p>
<p>
<button type="button" onclick="add(1)">1</button>
<button type="button" onclick="add(2)">2</button>
<button type="button" onclick="add(3)">3</button><br>
<button type="button" onclick="add(4)">4</button>
<button type="button" onclick="add(5)">5</button>
<button type="button" onclick="add(6)">6</button><br>
<button type="button" onclick="add(7)">7</button>
<button type="button" onclick="add(8)">8</button>
<button type="button" onclick="add(9)">9</button><br>
<button type="button" onclick="clear()">C</button>
</p>
</body>
</html>
For example, I have a home page with 2 buttons "show login popup" and "show register popup", and it can popup 2 windows on the homepage. Those 2 popup are divs in the homepage. I keep those 3 html separate, because I want the login and register can shows on any pages as a popup box.
Here is my problem: I have a same "show register popup" button in the login popup page, too. I want to do that, when I click the button, it can hide the login popup (the div in the home page) and "show register popup" on the home page. What should I do?
Here is my code example:
Home Page
<!DOCTYPE>
<html>
<head>
<title>Home page</title>
<meta charset="UTF-8">
<script src="testjs.js"></script>
</head>
<body>
<button id="login" onclick="goto_login()">goto login</button>
<button id="register" onclick="goto_register()">goto register</button>
<div id="loginPopup" style ="background-color:red; display:none;">
<object id="login_location" type="text/html" data="login.html"
style="width:100%; height:50%;">
</object>
</div>
<div id="registerPopup" style="background-color: yellow; display:none;">
<object id="login_location" type="text/html" data="regi.html"
style="width:100%; height:50%;">
</object>
</div>
</body>
</html>
Login Popup
<html>
<head><script src="testjs.js"></script></head>
<body>
<input id="id" type="text">
<input id="pw" type="text">
<input id="login" type="button" value="login">
<input id="goto_register" onclick="goto_register()" type="button" value="goto-register">
</body>
</html>
Register Popup
<html>
<head><script src="testjs.js"></script></head>
<body>
<input id="id" type="text">
<input id="pw" type="text">
<input id="register" onclick="goto_register()" type="button" value="register">
</body>
</html>
JavaScript
function goto_login() {
var loginPopup = document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");
loginPopup.style.display="block";
registerPopup.style.display="none";
}
function goto_register() {
var loginPopup = document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");
loginPopup.style.display="none";
registerPopup.style.display="block";
}
function close_pop() {
var loginPopup = document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");
loginPopup.style.display="none";
registerPopup.style.display="none";
}
I set the height to a px value, and removed the <object> tag for simplicity. My guess is there is something wrong with your object tag, I have not used it to import html the way you are trying to.
function goto_login() {
var loginPopup = document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");
loginPopup.style.display = "block";
registerPopup.style.display = "none";
}
function goto_register() {
var loginPopup = document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");
loginPopup.style.display = "none";
registerPopup.style.display = "block";
}
function close_pop() {
var loginPopup = document.getElementById("loginPopup");
var registerPopup = document.getElementById("registerPopup");
loginPopup.style.display = "none";
registerPopup.style.display = "none";
}
<button id="login" onclick="goto_login()">goto login</button>
<button id="register" onclick="goto_register()">goto register</button>
<div id="loginPopup" style="background-color:red; display:none;width:100%; height:300px;">
<input id="id" type="text">
<input id="pw" type="text">
<input id="login" type="button" value="login">
<input id="goto_register" onclick="goto_register()" type="button" value="goto-register">
</div>
<div id="registerPopup" style="background-color: yellow; display:none;width:100%; height:300px;">
<input id="id" type="text">
<input id="pw" type="text">
<input id="register" onclick="goto_register()" type="button" value="register">
</div>
I've been trying to wipe last input added in textarea by ONCLICK BUTTONS but don't seem to wipe last input instead it wipes all of onclick inputs.
Note, the button should be onclick as it variable changes dynamically.
<html>
<textarea id="Content" name="Content"></textarea>
<button class="AddTo" value="a">a</button>
<button class="AddTo" value="b">b</button>
<button class="AddTo" value="c">c</button>
<button class="Backspace" value="">backspace</button>
<button type="button" onclick="myFunctionY1();" class="list1" style="width:80px; background-color:red;" id="Y1">Y1</button>
<button type="button" onclick="myFunctionY2();" class="list1" style="width:80px; background-color:red;" id="Y2">Y2</button>
<script>
function myFunctionY1() {
document.getElementsByName("Content")[0].value += "Hello!";
}
function myFunctionY2() {
document.getElementsByName("Content")[0].value += "Hi!";
}
</script>
</html>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"> </script>
<script>
var values = [];
$(function () {
$('.AddTo').on('click', function () {
values.push($(this).val());
$('#Content').val(values.join(" "));
});
$('.Backspace').on('click', function () {
values.pop();
$('#Content').val(values.join(" "));
});
});
</script>
do it:
<html>
<textarea id="Content" name="Content"></textarea>
<button class="AddTo" value="a">a</button>
<button class="AddTo" value="b">b</button>
<button class="AddTo" value="c">c</button>
<button class="Backspace" value="">backspace</button>
<button type="button" class="list1" value="Hello!" style="width:80px; background-color:red;" id="Y1">Y1</button>
<button type="button" class="list1" value="Hi!" style="width:80px; background-color:red;" id="Y2">Y2</button>
</html>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"> </script>
<script>
var values = [];
$(function () {
$('#Y1').attr("value", "foo");
$('#Y2').attr("value", "foo2");
$('.AddTo').on('click', function () {
values.push($(this).val());
$('#Content').val(values.join(" "));
});
$('.Backspace').on('click', function () {
values.pop();
$('#Content').val(values.join(" "));
});
$('.list1').on('click', function () {
values.push($(this).val());
$('#Content').val(values.join(" "));
});
});
</script>
So I am doing a really basic thing. I wrote up this code. I was not able to get the result out of it. I am not sure what I am doing wrong. Because I am learning.
<head>
<script language="javascript" type="text/javascript">
function add(){
var input1=a;
var input2=b;
var result = a+b;
input1 = parseInt(document.getElementById("t1").value);
input2 = parseInt(document.getElementById("t2").value);
document.write("result");
}
</script>
<title>java</title>
</head>
<body>
<form name="f1">
<input type="text" id="t1" name="t1">
<input type="text" id="t2" name="t2">
<p>
<input type="button" id="add" value="add" onClick="function add();">
<input type="button" id="divide" value="divide" onClick="javascript:function divide();">
<input type="button" id="subtract" value="subtract" onClick="javascript:function subtract();">
<input type="button" id="multiply" value="multiply" onClick="javascript:function multiply();">
</p>
</form>
</body>
</html>
But it doesn't generate the the result.
The result wasn't actually being written, you were writing the string "result".
var input1=parseInt(document.getElementById("t1").value);
var input2=parseInt(document.getElementById("t2").value);
var result = input1+input2;
document.write(result);
Modify your function as:
function add(){
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1+input2;
document.write(result);
}
Hope This helps
Try this:
<head>
<script language="javascript" type="text/javascript">
function add(){
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 +input2;
document.write(result);
}
</script>
<title>java</title>
</head>
<body>
<input type="text" id="t1" name="t1">
<input type="text" id="t2" name="t2">
<p>
<input type="button" id="add" value="add" onClick="add();">
<input type="button" id="divide" value="divide" onClick="divide();">
<input type="button" id="subtract" value="subtract" onClick="subtract();">
<input type="button" id="multiply" value="multiply" onClick="multiply();">
</p>
</body>
</html>
you can check this on http://htmledit.squarefree.com/
<script language="javascript" type="text/javascript">
function add(){
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 +input2 ;
document.write(result);
}
</script>
This is my script might be easier to explain if yas can see it, im tring to reset the array with a button
<body>
<script type="text/javascript">
var number = [];
function myFunction()
{
var x = document.getElementById("box");
number.push(document.getElementById("input").value);
x.innerHTML = number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add to list"/>
</form>
<div id="box" style="border:1px solid black;width:150px;height:150px;overflow:scroll">
</div>
<form>
<input type=button onclick="number.splice(0)" value="Reset" />
</form>
</body>
</html>
Yes. Call it from a function.
EDIT: splice has problems with IE. Use array.length = 0 instead
<body>
<script type="text/javascript">
var number = [];
function myFunction() {
var x = document.getElementById("box");
number.push(document.getElementById("input").value);
x.innerHTML = number.join('<br/>');
}
function myReset() {
//number.splice(0);
number.length = 0;
var x = document.getElementById("box");
x.innerHTML = "";
x.innerHTML = number.join('<br/>');
}
</script>
<form>
<input id="input" type=text>
<input type=button onclick="myFunction()" value="Add to list"/>
</form>
<div id="box" style="border:1px solid black;width:150px;height:150px;overflow:scroll">
</div>
<form>
<input type=button onclick="myReset()" value="Reset" />
</form>
</body>
Despite being ugly, onclick="number.splice(0)" works: http://jsfiddle.net/39KZ9/20/