We Keep Coding

Changing div background image by clicking on specific button

Im trying to make a page where the background image of the div element changes once I click a button.
document.getElementById("one").addEventListener("click", photo);
document.getElementById("two").addEventListener("click", photo);
document.getElementById("three").addEventListener("click", photo);
document.getElementById("four").addEventListener("click", photo);
function photo()
{
var photograf= document.getElementById("photodiv");
var x= document.getElementById("one");
var y= document.getElementById("two");
var z= document.getElementById("three");
var t= document.getElementById("four");
if (x.click) {photograf.style.backgroundImage= "url('1.png')";}
else if (y.click) {photograf.style.backgroundImage= "url('2.png')";}
else if (z.click) {photograf.style.backgroundImage= "url('3.png')";}
else if (t.click) {photograf.style.backgroundImage= "url('4.png')";}
else {photograf.style.backgroundImage= "none";
}}
div id="photodiv">
</div>
<input type="button" value="1" id="one">
<input type="button" value="2" id="two">
<input type="button" value="3" id="three">
<input type="button" value="4" id="four">
The problem is once I try to click on the buttons the only photo that appears is "1.png" no matter what button I click.
Does anyone have an idea how this could be solved?

The problem is that you are testing x.click, y.click, etc. which is not actually testing to see which button got clicked, but instead is testing to see if each element has a click method, which they all do, but because the first one you test is x.click and that test returns true, that's the one that runs all the time.
The code can be simplified quite a bit with no if/then needed at all. And, all you'd have to do to add more choices is just add another button and add the new image path into the array.
See the comments inline below:
// Instead of setting up 4 separate event handlers that all point to the
// same callback function, we can use event delegation where we handle the
// event on an ancestor object of all the elements we care about
document.querySelector(".buttonContainer").addEventListener("click", photo);
// Store all the images in an array
var backgrounds = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mr._Smiley_Face.svg/2000px-Mr._Smiley_Face.svg.png",
"https://www.qualitylogoproducts.com/stress-balls/smileyface-squeezie-superextralarge-480745.jpg",
"https://cmkt-image-prd.global.ssl.fastly.net/0.1.0/ps/3647668/1160/1160/m1/fpnw/wm1/10837-royalty-free-rf-clipart-illustration-black-and-white-smiley-face-cartoon-character-vector-illustration-isolated-on-white-background-.jpg?1511798933&s=2e423029fc4d833fde26d36d8a064124"
];
// Get a reference to the output element
var picHolder = document.getElementById("photodiv");
// All event handling functions are automatically passed an argument
// that is a reference to the event object itself
function photo(event){
// Just set the background image based on the index of the button
// that got clicked within its parent and the corresponding index
// of the image in the array
// Get all the <input> elements
var buttons = document.querySelectorAll(".buttonContainer > input");
// Convert that node list into an array and get the index of the
// one that got clicked (event.target is the one that got clicked)
var index = (Array.prototype.slice.call(buttons)).indexOf(event.target);
// Set the background to the right image from the array
picHolder.style.backgroundImage = "url(" + backgrounds[index] + ")";
}
#photodiv { width:100px; height:100px; border:1px solid grey; background-size:cover; }
<!-- id's are not needed but wrapping all the buttons in a common ancestor will help -->
<div class="buttonContainer">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
</div>
<div id="photodiv"></div>

you should probably change the way you're doing it :
I will suggest something like this:
document.getElementById("one").addEventListener("click", photo(1));
document.getElementById("two").addEventListener("click", photo(2));
document.getElementById("three").addEventListener("click", photo(3));
document.getElementById("four").addEventListener("click", photo(4));
function photo(x) {
var photograf= document.getElementById("photodiv");
switch (x) {
case 1:
photograf.style.backgroundImage= "url('1.png')";
break;
case 2:
//Statements executed when the
//result of expression matches value2
break;
default:
//Statements executed when none of
//the values match the value of the expression
break;
}
}
SOURCE :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

function photo(e)
{
var photograf= document.getElementById("photodiv");
if(sanitize(e.target.value))
photograf.style.backgroundImage= `url('${e.target.value}.png')`;
}
div id="photodiv">
</div>
<input type="button" value="1" id="one">
<input type="button" value="2" id="two">
<input type="button" value="3" id="three">
<input type="button" value="4" id="four">`

javascript two trigger function on input button

Hi i would like few textboxes disabled when a textbox contains a specific text and i click a button.
Here is what I have:
button:
<div id="itemRows1">
<label ></label><input type="hidden" name="add_name1" /><input onclick="addRow1(this.form); " type="button" id="dodaj1" value="Dodaj tip droge in količino" class="btn btn-primary" />
</div>
<br>
</div>
script:
<script>
var dis1 = document.getElementById("preiskavoopr1");
dis1.onchange = function () {
if (this.value == "SKP" ) {
document.getElementById("dolgnaziv").disabled = true;
var x = document.getElementsByClassName("form-control1");
var i = 0;
for (i = 0; i < x.length; i++) {
x[i].disabled = true;
}
} else {
document.getElementById("dolgnaziv").disabled = false;
}
}
</script>
The button is adding more fields dinamicaly and is working as expected.
The text box with the id preiskavoopr1 is a drop down with 2 values and is OK.
When i select a value SKP in the dropdown the text boxes with ClassName("form-control1"); has to become disabled and that is working. But when i click on the button 2 more text boxes with the ClassName("form-control1"); appears not disabled but they should be.
Hope i explained well enough.

It looks like you are trying to add onclick methods to <input> elements which disguised into a button because you added class="btn btn-primary" to it.
Change your button to
<button onclick="addRow()" class="btn btn-primary">Button Text</button>

Display input value in a button

I have an input field and a button next to it, what i want to do is whatever i type in the input field then click on the button next to it, the result gets displayed in another button, here is what i tried so far:
function add_keyword() {
var keyword_value = (document.getElementById("keyword").value);
var result = keyword_value;
document.getElementById("btnresult").value = result;
}
#btnresult{
display: none;
}
<button type="button" class="btn btn-default" name="clickbtn" value="Add Keyword" onclick="add_keyword()">Add</button>
<div class="input-group">
<input type="text" class="form-control" id="keyword" name="keywordbox"/>
</div>
<button type="button" id="btnresult" class="btn btn-default">input value should be here</button>

https://jsfiddle.net/sheriffderek/p2LoLcv3/
I think this is what you are describing...
Some simplified markup
<div class="parent">
<input type='button' value='Add' rel='action' /><br>
<input type='text' rel='text-input' />
</div>
<ul class='button-list' rel='button-list'>
<!-- you need to put the buttons somewhere, right? -->
</ul>
jQuery was one of the tags, so I used it
// just caching some thing that will be reused (I like using rel)
var $parent = $('.parent'); // whatever - to keep some scope
var $addButton = $parent.find('[rel="action"]');
var $textInput = $parent.find('[rel="text-input"]');
var $buttonList = $('[rel="button-list"]');
$addButton.on('click', function() { // on click...
var currentInputValue = $textInput.val(); // get the value from input...
$buttonList.append('<li><button>' + currentInputValue + '</button></li>'); // append a new button...
$textInput.val(''); // clear input
});

You're almost there, you have to unhide the button you've hidden in the first place, and not set a value for a button, but rather the innerHTML property. Since a button doesn't hold a value, but displays the content between the tags as text.
I've commented my changes:
function add_keyword() {
var keyword_value = (document.getElementById("keyword").value);
var result = keyword_value;
// Changed from .value to .innerHTML
document.getElementById("btnresult").innerHTML = result;
// Changed style from to 'block'
document.getElementById("btnresult").style.display = "block"
}
#btnresult{
display: none;
}
<button type="button" class="btn btn-default" name="clickbtn" value="Add Keyword" onclick="add_keyword()">Add</button>
<div class="input-group">
<input type="text" class="form-control" id="keyword" name="keywordbox"/>
</div>
<button type="button" id="btnresult" class="btn btn-default">input value should be here</button>
In addition, there are several aspects of your code that could use improvement, I described them below:
function add_keyword() {
// No need for parentheses around the document.getElement function.
var keyword_value = document.getElementById("keyword").value;
// There's no need to place the value in a new variable, it is useful to place the element you wish to replace in a variable, since we'll be re-using it's instance.
var btn = document.getElementById("btnresult");
btn.innerHTML = keyword_value;
btn.style.display = "block"
}
EDIT: Since OP's goal was to create a new button with the content, this is an updated version that generates a new button for every new input.
function add_keyword() {
var keyword_value = document.getElementById("keyword").value;
// Create a new button element.
var btn = document.createElement("button");
// Set it's content to the keyword from the input.
btn.innerHTML = keyword_value
// Append it to the body.
document.body.appendChild(btn);
}
<button type="button" class="btn btn-default" name="clickbtn" value="Add Keyword" onclick="add_keyword()">Add</button>
<div class="input-group">
<input type="text" class="form-control" id="keyword" name="keywordbox"/>
</div>

Button onclick attribute error

Hello i am having some technical issues with my HTML code and javascript so to begin.
i have the <P id="One">and i need once you click the All courses input to redirect you to another page and completly disapear himself using javascript.
<p id="One" >
<input type="button" onclick="allCourses()" value="All Courses" />
<input type="button" onclick="" value="1st Year" />
</p>
and the Javascript i am using is
function allCourses(){
document.getElementById("One").innerHTML="";
var input = document.createElement('button');
var value = document.createTextNode("Go to Google");
input.appendChild(value);
//input.type = "button";
//input.onclick="location.href = 'www.yoursite.com';
//input.value="Go to Google";
var element = document.getElementById("One");
element.appendChild(input);
}
function Google(){
location.href = 'www.yoursite.com';
}
The button works like charm but as soon i attack the onclick attr it doesn't do nothing!

Radio buttons checked changing submit text

My site structure consists on an index.php which is styled by a css file. It then includes the following php code in a separate file:
<?php include("globals.php"); ?>
<form action="<?php echo $website.$relative_string;?>" name="subscribe" onsubmit="javascript:return checkEmail(this);" method="post">
<div id="cell8" class="titlecell2"><h3>Email:</h3></div>
<div id="cell9" class="inputcell2">
<input type="text" class="inputfield2" name="email" value="Your Email..." id="email2" maxlength="255" onfocus="this.value='';">
</div>
<div id="cell10" class="textcell3">
<input name="group" type="hidden" id="group[]" value="<?php echo $group; ?>">
<input name="subscribe" id="sub" type="radio" value="true" checked>
</span>Subscribe </p>
</div>
<div id="cell11" class="buttoncell">
<button type="submit" name="Submit2" value="Join" id="submitButton2">
<span>OK</span>
</button>
</div>
<div id="cell8" class="textcell4">
<input type="radio" name="subscribe" id="unsub" value="false">
</span>Un-Subscribe </p>
</div>
</form>
It appears on screen with no problems in the correct layout as my css style sheet. What I would like this to do is when I select the "Subscribe" radio button the submit button text "OK" changes to "Join". When I click on the Unsubscribe button text "OK" or "Join" changes to "Leave".
I tried to make some code from research:
if(document.getElementById('sub').checked) {
document.write("<span>Join</span>"
}
else if(document.getElementById('unsub').checked) {
document.write("<span>Leave</span>)
}
I think this kind of worked in that it changed to Join (replacing the OK line, but obviously didn't update on clicking unsubscribe. I guess it would update on refreshing the page if my default wasn't join. I guess I need to do some form of onclick but then I have no idea how to adjust that span ok bit.
Please help?
Many thanks Chris

Here is a solution in plain JavaScript without jQuery. It avoids the unnecessary overhead.
This should work, but I haven't had a chance to test it:
var sub = document.getElementById('sub'); // Save element to a variable, so you don't have to look for it again
var unsub = document.getElementById('unsub');
var btn = document.getElementById('submitButton2');
sub.onchange = function() //When sub changes
{
if(sub.checked) //If it's checked
{
btn.innerHTML = "<span>Join</span>"; // Set button to Join
}
else // If not..
{
btn.innerHTML = "<span>OK</span>"; // Set button to OK
}
}
unsub.onchange = function() //When unsub changes
{
if(unsub.checked) //If it's checked
{
btn.innerHTML = "<span>Leave</span>"; // Set button to Leave
}
else // If not..
{
btn.innerHTML = "<span>OK</span>"; // Set button to OK
}
}
However, you should not do it like this.
You should combine the two radio buttons into a radio group.
In that case you will listen for radio group to change, get the value of the radio group, set button text according to the value.

if you label your <span>OK</span> to something like <span id="your_id">OK</span> then added a class to your radio button like this <input class="your_class" type="radio" name="subscribe" id="unsub" value="false"> them...
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#your_class").change(function () {
if ($(this).is(':checked')) {
$("#your_id").text('Join');
}else {
$("#your_id").text('Leave');
}
});
</script>
This was all written in the browser so let me know if there are any problems.