Okay, I want to change my website background with JavaScript. Ideally with a drop down menu, but for now, buttons.
This works:
function selText(test){
var arr = document.getElementById(test).value;
if (arr == 1){
document.body.style.backgroundImage = "url('https://images6.alphacoders.com/431/thumb-1920-431411.jpg')";
}
else if (document.getElementById('btnim2')){
document.body.style.background = 'none';
}
}
<button id="btnim" value="1" onclick="selText(this.id)">text</button>
<button id="btnim2" value="2" onclick="selText(this.id)">more text</button>
However, if I set my 'else if' to arr == 2 and both buttons have the same id (btnim) it doesn't work, and I don't know why. I feel like I am missing something simple. What am I doing wrong?
if you use arr==2 and id remains btnim2 of button 2 it will still work. You can't have same id's of many elements in webpage because it will confuse the javascript compiler to target which element.
function selText(test){
var arr = document.getElementById(test).value;
if (arr == 1){
document.body.style.backgroundImage = "url('https://images6.alphacoders.com/431/thumb-1920-431411.jpg')";
}
else if (arr==2){
document.body.style.background = 'none';
}
}
<button id="btnim" value="1" onclick="selText(this.id)">text</button>
<button id="btnim2" value="2" onclick="selText(this.id)">more text</button>
There is another way to make this code work by passing the value of the button instead of id.
function selText(test){
var arr = test;
if (arr == 1){
document.body.style.backgroundImage = "url('https://images6.alphacoders.com/431/thumb-1920-431411.jpg')";
}
else if (arr==2){
document.body.style.background = 'none';
}
}
<button id="btnim" value="1" onclick="selText(this.value)">text</button>
<button id="btnim2" value="2" onclick="selText(this.value)">more text</button>
Send the button itself as parameter instead:
<script type="text/javascript">
function selText(button){
var arr = button.value;
if (arr == 1){
document.body.style.backgroundImage = "url('https://images6.alphacoders.com/431/thumb-1920-431411.jpg')";
} else if (arr == 2) {
document.body.style.background = 'none';
}
}
</script>
<button id="btnim" value="1" onclick="selText(this)">text</button>
<button id="btnim2" value="2" onclick="selText(this)">more text</button>
Related
I need to create a button that works like this :
var i = true
first click --> var i = false
second click --> var i = true
....
HTML
<input type="button" value="test" onclick="stop(); start();" />
How can i specify theese functions in my JS document ?
you can toggle a boolean by doing this :
var b = true;
b = !b
in your case use :
<input type="button" value="test" onclick="b = !b;" />
it's better to doing this with a function
var b = true;
function toggle () { b = !b; console.log(b) }
and in your html
<input type="button" value="test" onclick="toggle();" />
You can do it like this
<input type="button" value="test" />
And the javascript code.
var btn = document.getElementsByTagName('input')[0];
var i = true;
btn.addEventListener('click', function() {
if (i == true)
i = false;
else
i = true;
});
make a counter for clicks
var countClick= 0
if (countClick== 1) {
//do the first click code
}
if (countClick== 2) {
//do the second click code
}
You can simply associate a function call on onclick event and then toggle the boolean value:
var i = true;
function clicked () {
//toggle the value
i = !i;
console.log(i);
}
<input type="button" value="test" onclick="clicked();" />
Here is a snippet that does what you want. You can have it toggle forever or just the one time like your example.
var buttonClicks = 0;
var boolValue = true;
var boolValueOutput = document.getElementById("boolValue")
boolValueOutput.innerHTML = boolValue;
function onButtonClick()
{
buttonClicks++;
// If you want it to only work once uncomment this
//if (buttonClicks > 2)
// return;
boolValue = !boolValue;
boolValueOutput.innerHTML = boolValue;
}
<input type="button" value="test" onclick="onButtonClick();" />
<p id="boolValue"></p>
I want a simple program that basically enables/disables buttons as each button is pressed.
So, there are three buttons. The left button is enabled at the start of the program and I want to disable it and enable the button next to it onclick. The same when I press on the second button.
Can anyone show me where I'm going wrong in my code?
<html>
<head>
<button id="func1" onclick="func(1)">func 1</button>
<button id="func2" disabled="false" onclick="func(2)">func 2</button>
<button id="func3" disabled="false" onclick="func()">func 3</button>
</head>
<body>
<script>
var number = '';
function func(number)
if(number == '1'){ //Sets button setting to disabled or enabled when wanted
after particular parts of the program are run.
document.getElementById('func1').disabled = true;
document.getElementById('func2').disabled = false;
document.getElementById('output').disabled = true;
}
else if(number == '2'){
document.getElementById('func1').disabled = true;
document.getElementById('func2').disabled = true;
document.getElementById('func3').disabled = false;
}
</script>
</body>
</html>
Thanks again :)
First things first, you need to move the buttons from <head> to <body>.
Now on to the problem at hand: your function was missing the {} brackets around it and your comment was broken into two lines, the second of which was causing a syntax error. Should work now:
<button id="func1" onclick="func(1)">func 1</button>
<button id="func2" disabled="false" onclick="func(2)">func 2</button>
<button id="func3" disabled="false" onclick="func()">func 3</button><script>
function func(number){
if(number == '1'){ //Sets button setting to disabled or enabled when wanted after particular parts of the program are run.
document.getElementById('func1').disabled = true;
document.getElementById('func2').disabled = false;
document.getElementById('output').disabled = true;
}
else if(number == '2'){
document.getElementById('func1').disabled = true;
document.getElementById('func2').disabled = true;
document.getElementById('func3').disabled = false;
}
}
</script>
I think better to use something universal, like this:
<html>
<body>
<button class="myButton" onclick="myHandler(this)" >func 1</button>
<button class="myButton" onclick="myHandler(this)" disabled>func 2</button>
<button class="myButton" onclick="myHandler(this)" disabled>func 3</button>
<script>
function myHandler (e) {
// Toggle disabled property of current button.
e.disabled = !e.disabled;
// Toggle disabled property for next sibling if it has class 'myButton'.
if (e.nextElementSibling.className === 'myButton') {
e.nextElementSibling.disabled = !e.nextElementSibling.disabled;
// Otherwise toggle first button with class 'myButton'.
} else {
var b = document.getElementsByClassName('myButton')[0];
b.disabled = !b.disabled;
}
}
</script>
</body>
</html>
I have an HTML input, as well as some buttons.
<input type="number" placeholder="" id="id"/>
<button onclick="myfunction()" >Click Me</button>
<button onclick="toggle()">toggle</button>
The first button has this JavaScript function
var myfunction=function(){
if(bool){
a=document.getElementById('id');
a.placeholder='Invalid Character';
}
};
bool=false;
and the second button's function is this:
toggle=function(){
bool=!bool;
};
Basically, click the second button to change whether
bool
is true or false. The first button will set a placeholder if the value of bool is true. I want to figure out how to DYNAMICALLY set the color of a placeholder with JavaScript. I have found how to do it with CSS, but I need JavaScript. No jQuery or other frameworks please.
Thanks!
Travis J I specifically said that this is not a duplicate, as I CANNOT use CSS, like the question you mistakenly marked this as a duplicate of
I can ONLY use javscript, not css.
May be this is the not the RIGHT way to add inline styles, but this is the only way i found to full fill the OP requirement.
var placeholderColor = '#f0f';
var FontColor = '#000';
bool = true;
function toggle() {
bool = !bool;
}
function myfunction() {
if (bool) {
a = document.getElementById('id');
a.placeholder = 'Invalid Character';
a.style.color = placeholderColor;
}
}
function textChange() {
a = document.getElementById('id');
if (a.value != '') a.style.color = FontColor;
else {
a.placeholder = 'Invalid Character';
a.style.color = placeholderColor;
}
}
<input type="text" id="id" onkeyup='textChange()' />
<button onclick="myfunction()">Click Me</button>
<button onclick="toggle()">toggle</button>
This is my script
<script type="text/javascript">
function showlevel1() {
var l1 = document.getElementById('default');
l1.style.display = 'block';
var l2 = document.getElementById('secondDiv');
l2.style.display = 'none';
}
function showlevel2() {
var l2 = document.getElementById('secondDiv');
l2.style.display = 'block';
var l1 = document.getElementById('default');
l1.style.display = 'none';
}
function selectHandler(select) {
if (select.value == 'count') {
showlevel2();
} else if (select.value == 'Top') {
showlevel1();
}
}
</script>
HTML:
<form>
<select id='type'>
<option value="Top">TOP</option>
<option value="count">COUNT</option>
</select>
<input type='submit' value='submit' onclick=selectHandler(this)>
</form>
<div id='default' style="display:block">
<h1>Div 1</h2>
</div>
<div id='secondDiv' style="display:none">
<h2> Div 2</h1>
</div>
When I load the page the DIV 1 does shows up, since the property is set to display:'Block' but when I perform the selection from drop down it never changes to DIV2 upon the Count selection from drop down and a submit click button?
Can anyone please help in figuring out the issue and let me know what am I doing wrong?
Thanks
Your select.value outputs submit since your this element referes to
-> <input type="submit" value="submit"/>
Why
selectHandler(this) is triggered by your submit button and not by your <select> tag, so when you perform select.value it returns submit as your text.
After seeing your question I guess you are in need of getting the select tag value.
Try this
function selectHandler(select) {
// get your drop down list element i.e select tag
var selected = document.getElementById('type');
if (selected.value === 'Count') {
showlevel2();
}
else if (selected.value === 'Top') {
showlevel1();
}
}
After seeing your comments
The problem is your using type="submit"
which posts to the same page when your click on it. Change it to type="button"
<input type='button' value='submit' onclick="selectHandler()">
function selectHandler() {
// get your drop down list element i.e select tag
var select = document.getElementById('type');
if (select.value === 'Count') {
showlevel2();
}
else if (select.value === 'Top') {
showlevel1();
}
}
Or
<input type='submit' value='submit' onclick="return selectHandler()">
function selectHandler() {
var select = document.getElementById('type');
if (select.value === 'Count')
showlevel2();
else if (select.value === 'Top')
showlevel1();
return false;
}
js fiddle here http://jsfiddle.net/QGsza/68/
Just taking a quick look, it seems that you have checked for a lowercase value 'count' instead of 'Count'.
i.e. replace
select.value == 'count'
with
select.value == 'Count'
in your onclick on the button, you're passing "this" which would be a pointer to the button itself.
change it to document.getElementById('type') because it looks like your selectHandler is expecting the select element
also, change the button from "submit" to "button" as submit will tell the browser to make a request.
the first DIV:
<div style="display:block;" id="first">
the second DIV:
<div style="display:none;" id="second">
and on the function add:
document.getElementById('first').style.display = 'none';
document.getElementById('second').style.display = 'block';
what is problem with this script? i just want to show checkbox status in innerHTML that show "yes" after click on button, if it is checked, otherwise it shown "no".
<html>
<body>
<p id="demo"></p>
<input id="chkbox" type="checkbox" name="Terms" value="agree" ><br>
<input type="button" value="button" onClick="myFunction()" >
<script>
function myFunction() {
var box = document.getElementById("chkbox");
if(checkbox.checked)
{
var checked.value = "yes";
var txt = checked.value;
document.getElementById("demo").innerHTML = txt;
}
else if(checkbox.unchecked)
{
var unchecked.value = "no";
var txt = unchecked.value;
document.getElementById("demo").innerHTML = txt;
}
}
</script>
</body>
function myFunction() {
var box = document.getElementById("chkbox");
if(box.checked)
{
document.getElementById("demo").innerHTML = 'yes'
}
else
{
document.getElementById("demo").innerHTML = 'no';
}
}
The problems in your code were:
You set the variable box, but then used checkbox.checked instead of box.checked.
You looked for checkbox.unchecked. There's no such property; if .checked isn't true, then the box is unchecked.
You tried to declare variables checked.value and unchecked.value. Variable names can't contain ., that's used for specifying object properties when accessing a variable whose value is an object.
There are multiple problems.
There is no variable with the name checkbox
The syntax var checked.value = "yes"; is invalid
Try
<input type="button" value="button" onClick="myFunction()">
then
function myFunction() {
var box = document.getElementById("chkbox");
box.value = box.checked ? "yes" : 'no';
document.getElementById("demo").innerHTML = box.value;
}
Demo: Fiddle
Since jQuery tag is used include jQuery library in the page then
<input type="button" value="button" id="button">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
and
//dom ready handler
jQuery(function ($) {
//cache the elements for future use
var $chk = $('#chkbox'), // id-selector
$demo = $('#demo');
//click event handler
$('#button').click(function () {
//use is() and :checked-selector to check whether the checkbox is checked and use .text() to set the display text of the p element
$demo.text($chk.is(':checked') ? 'yes' : 'no')
})
})
Demo: Fiddle
try:
You assigned element to box not to checkbox
There is nothing like checkbox.unchecked
var name checked.value is not correct format.
Here is code:
function myFunction() {
var box = document.getElementById("chkbox");
if (box.checked) {
document.getElementById("demo").innerHTML = "yes";
} else {
document.getElementById("demo").innerHTML = "no";
}
}
Here is working Demo
Check this one
function myFunction() {
if(document.getElementById('chkbox').checked) {
alert("checked");
} else {
alert("not checked")
}
}
try something like this,Shorthand
function myFunction(){
var box = document.getElementById("chkbox").checked;
document.getElementById("demo").innerHTML = box ? 'yes' : 'no';
}