I am attempting to make some css change when using mobile but an unknown variable displays as undefined.
I have searched through numerous tutorials and found lots of different solutions but I am a beginner to javascript and html and don't entirely understand them. I am using chrome and changing the user agent to see what happens on mobile.
<!DOCTYPE html>
<html>
<body>
<p id="demo">Show</p>
<div id="device"></div>
<script type="text/javascript">
var innerHTML="";
testExp = new RegExp('Android|webOS|iPhone|iPad|' +
'BlackBerry|Windows Phone|' +
'Opera Mini|IEMobile|Mobile' ,
'i');
if (testExp.test(navigator.userAgent))
document.getElementById("device").innerHTML =
show();
else
document.getElementById("device").innerHTML =
hide();
function show() {
document.getElementById("demo").style.display = "none";
}
function hide() {
document.getElementById("demo").style.visibility = "visible";
}
</script>
<p>End</p>
</body>
</html>
On desktop it should show:
Show
End
But it displays:
Show
undefined
End
On mobile the 'show' disappeared. But undefined does not.
The problem comes from this line : document.getElementById("device").innerHTML = hide();
The hide function has no return, so if you use the data it returns, as it returns nothing, it puts undefined inside #device element.
Thanks for your help I was a bit of a beginner so thanks for the support. For a reason I do not understand, I had to put something in a return before it could complete the function
I may not have worded the above correctly please feel free to clarify
Related
I am trying to write a simple script which follows the logic below but I am having difficulties.
If "Name" field = blank
Then Hide "Comment" field
Else Show "Comment" field
$(document).ready(function() {
if ($('#ContactForm-name').value() == "") {
$('#ContactForm-body').hide();
} else {
$('#ContactForm-body').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Can someone please help me? I provided a screen shot of the form and its HTML.
The shopify store is https://permaink.myshopify.com/pages/contact with the store PW = "help".
Taking a look at the example link you provided w/ 'help' password, it doesn't look like jQuery is actually loaded on the site, after running the following in console: console.log(typeof window.jQuery) returns undefined.
You may need to use vanilla JS to achieve what you're trying to do (or side load jQuery, if you have permissions to do so and really need to use it).
Using JS without jQuery, you can try doing something like:
window.addEventListener('load', function() {
if (document.getElementById('ContactForm-name').value === '') {
document.getElementById('ContactForm-body').style.display = 'none';
} else {
document.getElementById('ContactForm-body').style.display = 'block';
}
});
Note, that just hiding the ContactForm-body textarea will still leave a border outline and the label Comment showing, so you may need to do more than just hiding the textarea (find the parent <div> in JS and hide whole block).
I have a dropdown list that I am hiding on initialization since it's not needed unless the client actually selections a specific radiobuttonlist object. I'm presently setting it to false through
dlInterval.Attributes.CssStyle[HtmlTextWriterStyle.Visibility] = "hidden";
However, attempting to change this through javascript on selection, is failing, at present, I have my code set up to execute as such.
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#<%=rblVectorChoices.ClientID%>").click(function() {
var intVectorSelectedIndex = $('#<%=rblVectorChoices.ClientID %> input[type=radio]:checked').val();
$("#<%=dlInterval.ClientID %>").style.visibility="visible";
if (intVectorSelectedIndex == 1) {
$("#<%=dlInterval.ClientID%>").show();
} else {
$("#<%=dlInterval.ClientID%>").hide();
}
});
});
</script>
As you can see I'm currently attempting to change the visibility from hidden, back to visible, yet I am receiving an error in the browser console 'TypeError: Cannot set property 'visibility' of undefined'
This doesn't make much sense to me, as the field should be hidden, and not just null. What is causing this to happen, and what is a good solution for such a thing?
The HTML attribute is not called visibility.
In CSS the corresponding attribute for .show() / .hide() is display.
the code you were looking for is :
dlInterval.Attributes.CssStyle["display"] = "none";
or you can just change the javascript to look like, I personally would think that you should hide the element in javascript if your going to show it in javascript . Instead of setting the display:none; in .Net code that is going to disappear when the page is rendered
just re-write your code like this:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
// hide element initially
$("#<%=dlInterval.ClientID%>").hide();
$("#<%=rblVectorChoices.ClientID%>").click(function() {
// much easier way to check if check box is checked
if ( $("#<%=rblVectorChoices.ClientID input[type=radio]:checked%>").is(":checked)) {
$("#<%=dlInterval.ClientID%>").show();
} else {
$("#<%=dlInterval.ClientID%>").hide();
}
});
});
</script>
also , I strongly , strongly reccomend using classes to select your html elements with javascript or jquery , .Net mangles the id's and you have to write out this weird syntax to get the proper id, uses classes prevents all that
NOTE: if you're going to use this second example then you never need to mess with
dlInterval.Attributes.CssStyle["display"] = "none";
Can you use prop and compare if it's true or false? Also, you cant call $("#<%=dlInterval.ClientID %>").style.visibility="visible"; you have to call it this way:
For those of you reminiscing on the missing .NET inline ID's here's my modified code:
$(document).ready(function () {
$("#<%=rblVectorChoices.ClientID%>").click(function () {
var intVectorSelectedIndex = $('#<%=rblVectorChoices.ClientID%>').prop('checked');
$("#<%=dlInterval.ClientID%>").css('visibility', 'visible');
if (intVectorSelectedIndex == true) {
$("#<%=dlInterval.ClientID%>").show();
} else {
$("#<%=dlInterval.ClientID%>").hide();
}
});
I am currently making some accessibility options which make the font size increase or decrease on a page. Following EndangeredMassa's for calling JS from a link it appears not to work!
My current code (which is dummy code with the right IDs which will be used in my actual site), does not even run a Javascript alert, and since I'm not one for Javascript, if anyone could let me know what I'm doing wrong.
HTML
<p id="html">Nice to meet you!</p>
<a id="incFontS" href="#">Increase Text</a>
JavaScript
var incFont = document.getElementById("incFontS");
incFont.onClick = function () {
window.alert("it ran!");
}
As you can see from my jsfiddle, the code does not work at all, and I haven't even gotten to the part where I start changin the font sizes (geh!).
Any help is greatly appreciated!
Case matters in JavaScript. The correct property name is onclick (with a lowercase 'c'). Try this:
var incFont = document.getElementById("incFontS");
incFont.onclick = function () {
window.alert("it ran!");
}
Demonstration
Also, be sure to read addEventListener vs onclick for a discussion about different techniques for binding event listeners.
DEMO
var incFont = document.querySelector("#incFontS");
incFont.addEventListener('click', function () {
window.alert("it ran!");
return false;
});
The function name is onclick not onClick
i.e.
var incFont = document.getElementById("incFontS");
incFont.onclick = function () {
window.alert("it ran!");
}
works for me.
Try this way to do increase your font size
HTML CODE
<p id="html">Nice to meet you!</p>
<a id="incFontS" href="#" onclick="myFunction()">Increase Text</a>
Java Script Code
<script>
function myFunction() {
document.getElementById("html").style.fontSize="xx-large";
}
</script>
I have javascript that working fine in Firefox 3.x.x, but it does not work in IE*, Chrome, Safari. Simple alert work before calling function. Here is the code
function showDiv(div){
//alert(div);
document.getElementById(div).style.visibility='visible';
document.getElementById(div).style.height='auto';
document.getElementById(div).style.display='block';}
function hideDiv(div){
//alert(div);
document.getElementById(div).style.visibility='hidden';
document.getElementById(div).style.height='0px';
document.getElementById(div).style.display='none';
}
here is the html page code
<td align="center"><a onclick="showDiv('<?=$val['keyname']?>')" style="cursor:pointer;">Edit</a></td>
if I put alert() before showDiv('<?=$val['keyname']?>') then alert box is displayed but the function is not called in other browsers other than fire fox
Please tell me the solution for this.
The syntax looks okay to me.
Make sure there are not multiple elements with the same ID in the document and that your element IDs are valid.
There is nothing inherently wrong in the code you have posted. I suggest you post a reproduceable non-working example: the problem will be elsewhere in the page. Maybe the div ID string isn't unique (this is invalid HTML and will make behaviour unreliable); maybe there's some other script interfering, maybe you have event code firing this that's not written in a cross-browser way
However your attempts to hide an element in three different ways seem like overkill to me. Just a single display change would do it fine.
Another way to do it is to set className='hidden' or '', and use a CSS rule to map that class to display: none. The advantage of this is that you don't have to know whether the element in question is a <div> (that should revert to display: block), a <span> (that should revert to display: inline) or something else. (The table-related elements have particular problems.)
Maybe you could try that:
function showDiv(div) {
var obj = document.getElementById(div);
if (obj) {
obj.style.display = "block";
obj.style.height = "auto";
} else {
alert("DIV with id " + div + " not found. Can't show it.");
}
}
function hideDiv(div) {
var obj = document.getElementById(div);
if (obj) {
obj.style.display = "none";
} else {
alert("DIV with id " + div + " not found. Can't hide it.");
}
}
Do not call document.getElementById several times in the same function, use a variable to store the div element.
The if (obj) test will only execute the code if it has been found by document.getElementById(...).
<script language="javascript">
function toggle(id) {
alert('call');
if (document.getElementById(id).style.display == "none") {
alert('now visible');
document.getElementById(id).style.display = "";
} else {
alert('now invisible');
document.getElementById(id).style.display = "none";
}
}
</script>
</head>
<body onload="toggle('image1');alert('test_body');toggle('image2')">
<script language="javascript">
alert('test_pre_function');
toggle('image1');
alert('test_after_function');
toggle('image2');
</script>
Looks like a lot of code but it's pretty simple so i think most of you won't have troubles with it. toggle() should toggle the display status of divs containing images.
When the user enters the site the divs should hide, when everything is loaded the divs should show up. (onload)
Strangely enough, the function in the body (not in the body tag) only work half, i get and alert 'test_pre_function' and i get an alert 'call' (out of the function), but that's it.
The code in the body tag runs just fine.
I find this weird because it's supposed to do exactly the same twice and one time it runs, another time not, so i guess i must have made some stupid mistake.
Script is executed as soon as it is parsed. If image1 and image2 haven't been parsed when the script is executed, document.getElementById("image1") will return null so .style.display will throw a "is null or not an object error". This explains why the two alerts work - execution stops at the first document.getElementById(id).style.display == "none" line.
Move the script to after the image elements in the document and it should work.
<script>
alert(document.getElementById("image1")); // -> null
</script>
<img id="image1" src="some/image.jpg" />
<script>
alert(document.getElementById("image1")); // -> object
</script>
Are you missing this?
alert('now visible');
document.getElementById(id).style.display = "block";
Try this http://jsfiddle.net/hUDb4/
var toggle = (function() {
// an object to keep state for elements
var state = {};
return function(id){
document.getElementById(id).style.display = (state[id] = !state[id]) ? "none" : "block";
};
})();
toggle("myid"); // none
toggle("myid"); // block
But the main issue here is as others has stated that the DOM isn't ready until the document is fully loaded.
you have used alert in the body onload. basically once the alert will get executed, then it asks you to click OK. meanwhile the last function may gets delayed focus.
see below
<script>
alert(document.getElementById("image1"));
<img id="image1" src="some/image.jpg" />
alert(document.getElementById("image1"));
</script>