We Keep Coding

javascript pop-up window with clickable image

I have a pop-up window (in Javascript) in which I would like to include a button hidden in an image.
So if the user clicks on the image the action should be performed. In HTML this is easy, but I don't know how to do this in Javascript.
Thanks for any help.
What I know is how to do it with TEXT. This is how I do it:
document.write('<input type="button" value="F e r m e r" onClick=\'window.close()\' class="button" onmouseover="this.className=\'buttonon\'" onmouseout="this.className=\'button\'" style="width: 100px;">');

You can just set background-image of button in CSS as you're probably going to style it anyway.
document.write('<button type="button" class="image-button" onclick="myFunction()">')
function myFunction() {
console.log("I love Malamuts");
}
.image-button {
background-image: url("https://www.psy.pl/wp-content/uploads/2017/03/shutterstock_375206839-864x575.jpg");
background-size: cover;
width: 50vw;
height: 100vh;
}

stuck with onclick tried google couldn't find answer

i need help getting this to work, tried everything google had to offer.. but still stuck. what i need it to do is load the value of (div id="availablecredits") to (div id="beta") on click. can any body help me out?
onclick="javascript:document.getElementById('beta').value=(javascript:document.getElementById('availablecredits').value)"
i also tried onclick="javascript:document.getElementById('beta').value=('#availablecredits')"

The property value is common for input elements like <input>, <select>, <textarea> and <button>
I think what you want is to copy a content of a <div> element to another div. If it's the case, use innerHTML instead of value.
Here is a snippet, just click on the gray area.
#div-two {
min-height: 20px;
background: #CCC;
}
<div id="div-one">
Hello this is #div-one
</div>
<div id="div-two" onclick="document.getElementById('div-two').innerHTML=document.getElementById('div-one').innerHTML"></div>
SNIPPET #2
You've defined a third <div> which you use as trigger but you can't click it if it's not visible, because it's height is 0. Specify some text inside it, then it's visible and the JS part work. Take a look at the snippet.
#getCredits {
background: #CCC;
}
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits" onclick="document.getElementById('beta').innerHTML=document.getElementById('availablecredits').innerHTML">Click here to get available credits</div>
SNIPPET #3 - jQuery
$('#getCredits').click(function() {
$("#beta").html($('#availablecredits').html());
});;
#getCredits {
background: #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits">Click here to get available credits</div>

Simple javascript function, change the ids in the function call to those of the elements in question.
<script>
function set_value( src,tgt ){
document.getElementById( tgt ).innerHTML=document.getElementById( src ).innerHTML;
}
</script>
<style>.p5{ display:block; padding:1rem; margin:1rem; border:1px solid black;}</style>
<div class='p5' id='src_div' onclick="set_value('src_div','tgt_div')">Weebles wobble but they don't fall down!</div>
<div class='p5' id='tgt_div'></div>
Or you can use a link to set the value

you should try to avoid writing inline event.try this:
<style>
#getCredits {
background: #CCC;
}
</style>
<div id="beta">0.00</div>
<div id="availablecredits">500</div>
<div id="getCredits">Click here to get available credits</div>
<script>
document.getElementById('getCredits').addEventListener("click",function(){
document.getElementById('beta').innerHTML=document.getElementById('availablecredits').innerHTML;
});
</script>
Why inline css and javascript are bad:http://robertnyman.com/2008/11/20/why-inline-css-and-javascript-code-is-such-a-bad-thing/

The .val() method is sometimes useful:
var input = $("#Input").val();

How to include an image or text inside a button?

hello am trying to put a text or image inside a button can anybody help me doing this here is what i have done
<div id ="bss"><input class="but" type="button" /><center>Mohammad ghazi istanbouly</center></div>
<style type="text/css">
.but{
width:100px;
height:35px;
box-shadow: 5px 5px 10px #777;
position: absolute;
top:20px;
left:22px;
background-color: #000;
background: rgba(0,0,0,0.86) ;
border-radius: 15px;
color: yellow ;
}
</style>
<script type="text/javascript">
var bss_node = document.getElementById("bss");
bss_node.style.color = "#000" ;
bss_node.style.fontSize ="50px" ;
bss_node.style.border = "1px solid #000" ;
bss_node.style.boxShadow ="10px 5px 10px #777" ;
bss_node.style.borderRadius ="15px"
var but_node = document.getElementById("but") ;
but_node.innerText="Log in"
</script>
so please anyone correct me and show me how to enter a text inside the button also the image thanks for your helping (Y)

First, the <center> tag is deprecated, so don't use it; second, and more to the point, you could just (literally) put in image inside of a <button>:
<button><img src="path/to/image.png" /></button>
To include text, then (as implied, above), the <button> element can contain (non-interactive) HTML elements, such as:
<button><p>Whatever text you'd like to enclose</p></button>
If, of course, you need this image to be a background-image to the <button>, then CSS would also allow you to implement that:
button {
background-image: url(path/to/image.png);
}
References:
<button>.
<center>.

to put a text into your button use this:
<input class="but" type="button" value="SOME TEXT IN THE BUTTON" />
To insert an image into the button:
<input class="but" type="button" style="background-image: url(myimage.png)"/>
Edit: To change the size of the button so that the image fits in it use this:
<input class="but" type="button" style="background-image: url(myimage.png); width: 100px; height: 100px"/>
Simply change the two 100px with the size of your image!

Disable/Non-Clickable an HTML button in Javascript

I have following HTML snippet for a button:
HTML:
<div class="Clear" title="Clear">
<div class="ClearButton">
<button id="reset" type="reset" title="Clear Photos"></button>
</div>
<div class="ClearText">
Clear
</div>
</div>
CSS:
div.ClearButton
{
vertical-align: top;
display: inline-block;
background: url(../CustomControl/buttons.png?ver=365321878) no-repeat scroll -343px -443px rgba(0, 0, 0, 0);
height: 16px;
overflow: hidden;
width: 16px;
}
div.Clear
{
vertical-align: top;
display: inline-block;
overflow: hidden;
cursor: pointer;
padding-left: 2px;
padding-bottom: 6px;
padding-right: 6px;
padding-top: 4px;
}
On a certain event, I need to disable this button completely. I tried with the following code, but it does not disable/gray out the button and it's still clickable.
var resetBtn = document.getElementById("reset");
resetBtn.disabled = true;
As someone suggested that the CSS I have applied is causing this issue. Please suggest how can I make this button non-clickable.

Use :
resetBtn.disabled = "disabled";
This works in all browsers -> http://jsfiddle.net/fMV4B/

Using Only CSS:
//CSS
.no-click {pointer-events: none;}
<input class="no-click" />

You can do it with the method : setAttribute()
Your js will be like that :
document.getElementById("reset").setAttribute('disabled','disabled');

This JSFiddle shows it working, based on this: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_disabled. It could be that it's not working as expected because your CSS is making it visually appear different. Remove you CSS first to make sure the JavaScript it working as expected.
Here's the code for the JSFiddle:
<button type="button" id="test">Click Me!</button>
<script>
document.getElementById("test").disabled = true;
</script>
Do you have an example of when your JavaScript is running?

Have you read through this answer or tried
https://stackoverflow.com/a/3014678/2992661
resetBtn.setAttribute('disabled', 'disabled');

Your code works fine.
The problem is almost certainly that the JavaScript code is either not being called at all or is being called in the wrong spot.
If you run this code immediately, make sure that the DOM is loaded (window.onload callback, or preferably have your JS code right before </body>).
Otherwise just make sure that any event that runs the JS code is actually firing.

Try this code:
To disable the submit button with jQuery, you just need to add a “disabled” attribute to the submit button.
$('#buttonId').click(function(){
$('#buttonId').attr("disabled", true);
});
To enable back the disabled submit button, set the “disabled” attribute to false, or remove the “disabled” attribute:
$('#buttonId').attr("disabled", false);
or
$('#buttonId').removeAttr("disabled");

HTML how to remove text in FileUpload field?

When I have a file upload field,
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
</form>
http://jsfiddle.net/jakeaustin5574/6DzgU/
It automatically creates a text "No file chosen" and a "Browse" button.
I want to change or remove this "No file chosen" text.
Is there anyway to achieve this in css or Javascript?
Thanks

You can apply css rules like...
input[type=file]{
color:transparent;
}

First of all. You have to hide your input:
input#image{position:fixed;top:-100px;}
Secondly, you have to create alternative button with your skin:
<form action="" method="post" enctype="multipart/form-data">
<input id="image" type="file" name="image">
<button id="image_alt">Select image</button>
</form>
and the last step is to create a javascript script which link alternative button with original one:
document.getElementById('image_alt').addEventListener('click',function(){
document.getElementById('image').click();
});
Example Fiddle

You can set the value of the image input to "" using jQuery to remove the selected file:
$("#image").val("")
See this fiddle:
http://jsfiddle.net/nfvR9/1/
NOTE: This is dependent on browser used. It's works in FF 22 and Chrome 29.

I am sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). check this styling article

HTML:
<div class="inputWrapper">
<input class="fileInput" type="file" name="file1"/>
</div>
CSS:
.inputWrapper {
height: 32px;
width: 64px;
overflow: hidden;
position: relative;
cursor: pointer;
/*Using a background color, but you can use a background image to represent a button*/
background-color: #DDF;
}
.fileInput {
cursor: pointer;
height: 100%;
position:absolute;
top: 0;
right: 0;
z-index: 99;
/*This makes the button huge. If you want a bigger button, increase the font size*/
font-size:50px;
/*Opacity settings for all browsers*/
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}
take a look of this fiddle:
its working for your needs.
FIDDLE - DEMO
this demo its a reference of this:
stackoverflow question LINK
From the autor:ampersandre

<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;height: 24px;overflow:hidden;">
<img src="http://maps.google.com/mapfiles/ms/micons/blue-dot.png" alt="" title="Add Attachment" style="height:24px;width:24px; position: relative;top: 1px; left: -3px;"/>
<input type="file" id="fileupload" name="upload" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0); position: relative; top: -25px; left: -1px" />
</div>
JQuery:
function getFileName() {
var varfile = $('#fileupload').val().replace(/.*(\/|\\)/, '');
$("#filename").text(varfile);
}
$("#fileupload").on('change', function() {
getFileName();
});
Demo:
http://jsfiddle.net/m44fp2yd/

$(function () {
$('input[type="file"]').change(function () {
if ($(this).val() != "") {
$(this).css('color', '#333');
}else{
$(this).css('color', 'transparent');
}
});
})
input[type="file"]{
color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" name="app_cvupload" class="fullwidth input rqd">

The No file chosen text is entirely dependent on the browsers rendering engine - I assume you use Chrome. If Firefox you'll see No file selected and in IE you'll get a greyed out textbox with no value at all. This cannot be changed.
The alternative is to use a plugin (such as this) which gives you complete control over the styling of the file control.

It's up to the browser to render the file upload box. Each one does this in your own way. For example, in my chrome I can see the No file chosen text. Someone using Firefox might see something else entirely. There is no direct way to control this rendering process.
However, there are some hacks which can be used. For details, check out this link.

this text show by browser different browser show different message
chrome show=no file choosen
mozilla show=no file selected
and same as ie