Hide drop down list on conditional - javascript

I am simply trying to hide a select list/drop down list on an html page. I am not trying to hide the options in the select list, just the select list overall. I am having the hardest time for some unknown reason. I cannot figure out how to do this.
HTML
<HTML>
<head>
<title>Test</title>
<script type="text/javascript">
var myVal = 10;
if (myVal = 10) {
document.getElementById("contracts").style.visibility="hidden";
}
</script
</head>
<body>
<select id="contracts" name ="contracts" style="width:99%;height:50px"></select>
</body>
</html>
As simpel as can be, yet I cannot figure out how to hide the select list. It's still present on my page. This example is actually hiding the values in my select list but not the overall select list. Does anyone know how to accomplish this? I am out of ideas. Thanks in advance for your help.

document.getElementById('contracts').style.display = 'none';
The above should do
You man consider using jQuery though. Makes your life simple
$('#contracts').hide();
That's all
Cheers

try and move the script to the bottom of the page. It's executing before the element is loaded. You could also put it in the "onload" function
window.onload = function(){
var myVal = 10;
if (myVal = 10) {
document.getElementById("contracts").style.visibility="hidden";
}
};

Instead of visibility, you should be looking at display property. Check the snippet below.
<HTML>
<head>
<title>Test</title>
</head>
<body>
<select id="contracts" name ="contracts" style="width:99%;height:50px"></select>
</body>
<script type="text/javascript">
var myVal = 10;
if (myVal = 10) {
document.getElementById("contracts").style.display="none";
}
</script
</html>

Related

Body onclick consecutive links

Hi I have this script that opens a new tab when clicking anywhere on the page but it works with only one link, I would like to make it so it can open links multiple times, consecutively. I would really appreciate any help.
<script type='text/javascript'>
var popup = function() {
window.open ("https://example.com/", "Window","status=1,toolbar=1,width=500,height=500,resizable=yes");
}
</script>
<body onclick='popup();'>
I tried multiples onclick in the body tag but it didn't work
If you want to cycle through multiple URLs, try this out.
<!DOCTYPE html>
<html>
<body onclick='popup();'>
<script>
const urls = ["https://www.google.com", "https://www.stackoverflow.com", "https://www.gmail.com"];
let counter = 0;
const popup = () => {
window.open(urls[counter++ % urls.length]);
}
</script>
</body>
</html>

Text appearing with delay

I'm trying to find the solution that how can i make a text appear on the page after 10 seconds of page load? example text..
I didn't do anything, because I think it's about javascript here...
Example : Something like this: http://postimg.org/image/duogy83zd/
Try below code, thats what you need :
<html>
<head>
<script>
window.onload = function(){
var theDelay = 10;
var timer = setTimeout("showText()",theDelay*1000)
}
function showText(){
document.getElementById("delayedText").style.visibility = "visible";
}
</script>
</head>
<body>
<div id="delayedText" style="visibility:hidden">
I didn't do anything, because I think it's about javascript here...
</div>
</body>
</html>

Trying to change button's contents each hit fails

Given the code :
<html>
<head>
<script src="jquery-2.1.0.min.js"></script>
Something...
</head>
<button id='flip' type='button'>Flip</button>
<script>
$('#flip').bind('click', function() {
var x = document.getElementById("flip").name;
if (x == 'Flip')
{
$(this).text('Flop');
}
else
{
$(this).text('Flip');
}
});
</script>
</body>
</html>
I'm trying to change the button each time it is clicked , but it doesn't work .
Any idea how to fix it ?
Much appreciated
There is no name attribute on your <button>, so you'll always get empty value. No need for document.getElementById because button is in this. Simply call text() without parameters to get current value:
var x = $(this).text();
Update
Here is demo in JsFiddler.
I would do something like this:
HTML:
<button id="flipflop">flip</button>
javascript:
var flip = true;
$("#flipflop").click(function(){
if(flip)
$("#flipflop").text("flop");
else
$("#flipflop").text("flip");
flip = !flip;
})
FIDDLE
edit: if you want to be really savvy, I would use the following line:
var flip = ($("#flipflop").text() === "flip");
Which automatically determines which way you need to flip (or is it flop?).

I'm a bit lost on DOM manipulation

Alright. As a part of a personal project to get familiar with Javascript, css and html outside of tutorials I've decided to try to create a cookie clicker like game for fun. However, I'm a bit stuck on the DOM manipulation.
var multiplier=1;
var money=5;
var moneyTotal=money*multiplier;
$(document).ready(function() {
$('div #button').click(function() {
var money++;
});
});
document.getElementById('counter').innerHTML = moneyTotal;
What I'm trying to do is having some text in my html index page, that changes whenever you click the div with the ID button. That piece of text has the id counter. But I can't seem to make this work, and I'm starting to get really frustrated after having this problem for 4 hours and not finding a solution. I have a feeling I'm missing some very obvious syntax, but I have no idea on what.
Edit:
Alright I changed the code so that it looks like this now:
var multiplier=1;
var money=5;
$(document).ready(function() {
$('#button').click(function() {
money++;
$('#counter').html(money * multiplier);
});
});
However it still won't target my div with the ID counter.
Here's the index.html, but I'm 99% sure there's no syntax errors there, and I have no idea on why it won't work.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'/>
</head>
<body>
<div id="button"></div>
<div id="counter">0</div>
</body>
</html>
Edit:
This is the final solution, thanks again everyone!
var mp = 1
var money = 0
$(document).ready(function() {
var localMoney = localStorage.getItem("money");
var localmp = localStorage.getItem("mp")
$('#moneycounter').click(function() {
money++;
$('#counter').html(money * mp);
});
});
I'm not sure what you're expecting it to do...
But var money +1 is wrong. Should be money++
Then you have to recalculate moneyTotal, and set it into the innerHTML at that point.
You need to run the function to update your div everytime you click!
var multiplier=1;
var money=5;
var moneyTotal=money*multiplier;
$(document).ready(function() {
$('div #button').click(function() {
money++;
updateElement();
});
});
function updateElement(){
document.getElementById('counter').innerHTML = moneyTotal;
}

Appending children into a popup-window. (JavaScript)

I'm having some trouble trying to get a fairly simple popupper to work. The idea is that the parent should open a popup window and then append a div in it.
The relevant parts of the code:
parent.html:
var childWindow;
function togglePref() {
childWindow = window.open("popup.html", "prefPopup", "width=200,height=320");
}
function loadPopupElements() {
var prefElements = document.getElementById("prefBrd").cloneNode(true);
var childDoc = childWindow.document;
var childLink = document.createElement("link");
childLink.setAttribute("href", "pop.css");
childLink.setAttribute("rel", "stylesheet");
childLink.setAttribute("type", "text/css");
childDoc.head.appendChild(childLink);
childDoc.body.appendChild(prefElements);
}
popup.html:
<head>
</head>
<body onload="opener.loadPopupElements();">
</body>
This works fine with Safari and Chrome, but for some reason IE refuses to append anything.
Ok, I managed to work around the problem with a uglyish solution using innerHTML. Apparently, as Hemlock mentioned, IE doesn't support appending children from a another document. Some suggested to take a look at the importNode() method but I seemed to have no luck with it either.
So, the workaround goes as follows:
parent.html:
var childWindow;
function togglePref() {
childWindow = window.open("popup.html", "prefPopup", "width=200,height=320");
}
function loadPopupElements() {
var prefElements = document.getElementById("prefBrd");
var childDoc = childWindow.document;
childDoc.body.innerHTML = prefElements.innerHTML;
}
popup.html:
<head>
<link href="pop.css" rel="stylesheet" type="text/css">
</head>
<body onload="loadElements();">
</body>
<script type="text/javascript">
function loadElements() {
opener.loadPopupElements();
}
</script>
This seems quite a nasty way to go because in my case the #prefBrd contains some input elements with dynamically set values, so in order for the popup.html to grab them, it has to do a bit of iteration at the end of the loadElements() function, which wouldn't have been necessary using appendChild.

Categories