I built this simple script to input a certain number,
Now I want to use this but with characters, how would I change the Num == input and what would I change it to?
Many Thanks
<script type="text/javascript">
function check_number()
{
var num = document.getElementById('input_number').value;
if (num == smaller){
document.getElementById('result_image_correct').style.display = 'block';
document.getElementById('result_image_incorrect').style.display = 'none';
document.getElementById('result_image_correct2').style.display = 'block';
}
else{
document.getElementById('result_image_incorrect').style.display = 'block';
document.getElementById('result_image_correct').style.display = 'none';
}
}
</script>
Then just change smaller to "smaller" or 'smaller'.
Related
<span id='amount'>0.00000000</span>
<a class='button-withdraw' id='tombolco' href='#'>Checkout</a>
<script>
var amount = document.getElementById("amount").innerHTML;
if (amount >= 0.001) {
document.GetElementById("tombolco").style = "display:block";
} else {
document.GetElementById("tombolco").style = "display:none";
}
</script>
Why doesn't my code work? What's wrong with it and how can I solve it?
document.GetElementById("tombolco").style = "display:block";
That's not the right way. This is
document.getElementById("tombolco").style.display = 'block';
Also note that it is getElementById, not with a capital G. Same with 'none',Rest of your code is fine.
Fiddle
<script>
var amount = document.getElementById("amount").innerHTML;
if (amount >= 0.001) {
document.getElementById("tombolco").style.display = 'block';
} else {
document.getElementById("tombolco").style.display = 'none;
}
</script>
If you want to assign a CSS string to the element, as you are trying to do, use style.cssText:
document.getElementById("tombolco").style.cssText = "display:block";
<div id="title1"><img src="a.jpg"></div>
<div id="title2"><img src="b.jpg"></div>
<div id="title3"><img src="c.jpg"></div>
<script type="text/javasctipt">
if ("{{IMAGE(z1)}}" = "") { document.getElementById('title1').style.display = "none"; }
if ("{{IMAGE(z2)}}" = "") { document.getElementById('title2').style.display = "none"; }
if ("{{IMAGE(z3)}}" = "") { document.getElementById('title3').style.display = "none"; }
</script>
I like to have these div tags title1, title2, title3 disappear when {{IMAGE(z1}}, {{IMAGE(z2}} and {{IMAGE(z3}} are not exist. These tags are the library tags for image uploads. In other words, When the image is not uploaded, these div tags will be display: none
But my javascript is not working, any idea why? Thanks in advance. Oh and Please I need this to be done in only Javascript, nojQuery please.
Source code example:
{{IMAGE(z1)}} is not uploaded,
<script>
if ("" = "") { document.getElementById('title1').style.display = "none"; }
if ("http://d3d71ba2asa5oz.cloudfront.net/40000483/images/thumbnail2.jpg" = "") { document.getElementById('title2').style.display = "none"; }
if ("http://d3d71ba2asa5oz.cloudfront.net/40000483/images/thumbnail3.jpg" = "") { document.getElementById('title3').style.display = "none"; }
if ("http://d3d71ba2asa5oz.cloudfront.net/40000483/images/thumbnail4.jpg" = "") { document.getElementById('title4').style.display = "none"; }
</script>
I am trying to get this snip of code to work in a while loop instead of an if.
I need each instant of num_# to not be displayed if the printLoad_# val is empty. So if printLoad_1 value = nothing, the Num_1 would not be displayed, and then the printLoad_2 would check to see if its num_2 is empty and so on.
The problem I am having is the function stops before checking each section.
Im not sure if a do-while will work.
$(document).ready(function() {
if(document.getElementById("printLoad_1").value == "")
{
document.getElementById('num_1').style.display = 'none';
}
if(document.getElementById("printLoad_2").value == "")
{
document.getElementById('num_2').style.display = 'none';
}
if(document.getElementById("printLoad_3").value == "")
{
document.getElementById('num_3').style.display = 'none';
}
if(document.getElementById("printLoad_4").value == "")
{
document.getElementById('num_4').style.display = 'none';
}
if(document.getElementById("printLoad_5").value == "")
{
document.getElementById('num_5').style.display = 'none';
}
});
Have you considered just compositing the strings instead of this verbose construction? Something like this:
for( var i=1; i<=5; i++ ) {
if( document.getElementById('printLoad_'+i).value === '' ) {
document.getElementById('num_'+i).style.display = 'none';
}
}
Assuming you're using jQuery and that your elements are in order, I'd forget about ID's. If you use common classes, say .printload and .num, then you can easily target elements by index like:
$('.printload').each(function(i){
if (!this.value) $('.num').eq(i).hide();
});
if you have a variable amount of printLoad and num:
var i = 1,
pl=document.getElementById('printLoad_'+i),
num = document.getElementById('num_'+i);
while(pl !== null && num !== null){
if(pl.value === ""){
num.style.display = 'none';
}
i++;
pl=document.getElementById('printLoad_'+i),
num = document.getElementById('num_'+i);
}
Here is a slight modification of Ethan's answer that "works dynamically". I've also updated it to use jQuery. This could be handled cleaner if CSS classes and a hierarchy relationship were used, but that would affect how the DOM needed to be generated ..
for (var i = 1; /* break */; i++) {
var printEl = $('#printLoad_' + i)
if (printEl.length) {
if (!printEl.val()) {
$('#num_' + i).css({display: 'none'})
}
} else {
// No #printLoad_N, guess we're done looking
break
}
}
Per #elclanr 's answer:
Use common classes, and target elements by index, it'll be much simpler.
Set your "printLoad" elements to class='printLoad' and your "num" elements to class='num'. Then...
for (i=0;i<document.getElementByClass('printLoad').length;i++)
{
if (document.getElementByClass('printLoad')[i].value == "")
{
document.getElementByClass('num')[i].style.display='none';
}
}
I want to change a picture in my site every 5 second and I have used this code!but it does'n work!
where is the problem!
<script type="text/javascript"src="http://code.jquery.com/jquery-1.9.1.min.js"> </script>
<script type="text/javascript">
$(document).ready(function () {
var interval = setInterval(time, 5000);
}); // ending ')' was missing
</script>
<script type="text/javascript">
function time() {
var m11 = document.getElementById("m1");
var m22 = document.getElementById("m2");
var m33 = document.getElementById("m3");
var name= mm11.style.display.toString();
if ( name=="block") {
m11.style.display = "none";
m22.style.display = "block";
}
if(m22.style.display.toString() ="block") {
m22.style.display = "none";
m11.style.display = "block";
}
}
</script>
Change
if(m22.style.display.toString() ="block")
with
if(m22.style.display.toString() == "block")
Also, you don't need the "toString()", because display is already a string.
Here is a shorter code:
function time() {
var m11 = document.getElementById("m1");
var m22 = document.getElementById("m2");
var m33 = document.getElementById("m3");
if (m11.style.display == "block") {
m11.style.display = "none";
m22.style.display = "block";
}
if(m22.style.display == "block") {
m22.style.display = "none";
m11.style.display = "block";
}
}
Since you're already using jquery It seems to me that you can simply use
function time() {
$('#m1').toggle();
$('#m2').toggle();
}
You can directly use. Note that it should be == when comparing in If statement
document.getElementById('m1').style.display = 'none';
On the second if block, you miss-typed the comaprsion operator.
if(m22.style.display.toString() ="block")
Should be
if(m22.style.display.toString() =="block")
Better way is as follows:
HTML:
<div id="m1" style="display:block">Hello1</div>
<div id="m2" style="display:none">Hello2</div>
JS:
setInterval(time, 5000);
function time() {
$("#m1, #m2").toggle();
}
Refer LIVE DEMO
UPDATED:
As per #Sarah sh comment, you need to show images one by one.
Here is your functionality.
HTML:
<div class="img">Hello1</div>
<div class="img">Hello2</div>
<div class="img">Hello3</div>
<div class="img">Hello4</div>
JS:
var currObj = $(".img").first();
$(currObj).show();
$(".img").not(currObj).hide();
setInterval(rotateImage, 2000);
function rotateImage() {
var tempObj = currObj;
if ($(tempObj).is(":last"))
currObj = $(".img").first();
else
currObj = $(currObj).next();
$(tempObj).hide();
$(currObj).show();
}
Refer LIVE DEMO
I have a javascript toggle function:
<script type="text/javascript">
function toggle(layer) {
var d = document.getElementById(layer);
d.style.display = (d.style.display == 'none') ? '' : 'none';
}
</script>
What this does is:
I have a few links on page and on click of these links it shows / hides the respective DIV section associated with it..
In the following two links it opens and closes div section named stusearch & facsearch
<a href="javascript:toggle('stusearch')" ><b>Student Manager</b></a>
<a href="javascript:toggle('facsearch')" ><b>Faculty Manager</b></a>
This works well except that, i would like to hide the previous shown toggle when a new toggle link is clicked, at the moment the previous one remains open, and the new one opens up below it.
I tweaked your code a bit here. I ended up adding a variable to store the divs you want to show/hide in case you want to add more divs to toggle:
var divs = [ "stusearch", "facsearch" ];
function toggle(layer) {
var d
for(var i = 0; i < divs.length; i += 1) {
d = document.getElementById(divs[i]);
d.style.display = 'none';
}
d = document.getElementById(layer);
d.style.display = '';
}
<script type="text/javascript">
function toggle(layer) {
var d = document.getElementById(layer);
d.style.visibility = (d.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script>
In pure javascript, the easiest way is going to be to just 'remember' the last element you modified - aka:
var lastElement = null;
function toggle(elementId)
{
if(lastElement != null)
lastElement.style.display = 'none';
var newElement = document.getElementById(elementId);
newElement.style.display = (newElement.style.display == 'none') ? 'visible' : 'none';
if(newElement != lastElement)
lastElement = newElement;
}
You hide the last reference, then get the new one and show it.
You could keep a local var to it,
<script type="text/javascript">
function(){
var shown;
window.toggle = function(layer) {
if(shown)
shown.style.display = '';
var d = document.getElementById(layer);
d.style.display = (d.style.display == 'none') ? '' : 'none';
shown = d;
}
}
</script>
Alternatively, you could control the visibility with a css class and do a blanket removel of the class from all elements before setting it.
Here is a jQuery solution in case you ever decide to implement a library:
the JavaScript:
function toggle(layer) {
$('.toggleableSearch').hide();
$(layer).show();
}
the html:
<a href="javascript:toggle('stusearch')" ><b>Student Manager</b></a>
<a href="javascript:toggle('facsearch')" ><b>Faculty Manager</b></a>
<div id="stusearch" class="toggleableSearch"></div>
<div id="facsearch" class="toggleableSearch"></div>