JavaScript - Replacing Text With Link Clicks

Hi,

See I have called a function in onchange event of a dropdownlist.What happens in the onchange function is that if the value for dropdown has already been entered once, then an alert message will be shown. The problem I have is, if the value has been already entered, when I try to change the value in dropdown, dropdownlist gets displayed (expands) and an alert message gets displayed. When I click "OK" of alertbox first the dropdown gets back to it original form and only on the next click alert box goes. What I need is everything should happen in a single click itself.

is there js to prevent malicious clickers who try to ban my site from google ads by clicking so many times?

Hi!

Sorry for asking such noobish questions, I tried to search but couldnt find anything addressing my problem. It's probably pretty simple though.

I have an image on a website. I want the image to change, after the user has clicked on it five times. In other words, on the first 4 clicks, nothing should happen. But the fifth click should change the source of the image.

Here is my feeble attempt:

Code:

function image_changer(){
var i=0;
for (i=0;i<=5;i++)
{
document.getElementById('changingimage001').src = 'images/smile6.jpg';
}

}

HTML:

Code:

<img id="changingimage001" src="images/base.jpg" onclick="image_changer();" alt="a changing image" />'

I quess my main confusion is this:

How do I make a new iteration in my for loop happen only when the mouse is clicked (instead of all the iterations running trough as fast as possible)?

Hi,

I have a click event that changes an element from a span that acts like a text link, to a textbox that the user types in:

Code:

Event.add(area_el_rename, 'click', function(e) 
			{
				if(!currently_renaming)
				{
					area_el.innerHTML = '<textarea name=\"renaming_area\" id=\"renaming_area\" style=\"width:100px;height:10px;background-color:#DCDCDC; resize:none;font-size:8px;\"></textarea><br>';
					currently_renaming=true;
				}
			});

I am wondering if there is any way to determine if the user has clicked outside the textbox, and if so, perform an action (in my case revert back to the <span>. The solution probably doesn't need to be tied to anything. It probably just has to be something like:

if(click_outside_id("renaming_area"))
{
//do my desired action
}

I'm using "Coda-Slider 2.0" for a tab-based interface. I used external triggers to switch between tabs, and I'm having trouble adding my "selected" class when I click on one of the triggers.

It works...BUT...it takes two clicks for it to respond correctly. The slider works just fine, but the "selected" class isn't added (i.e. the selected tab gets a different background image) until I click on one of the menu items twice. Here is the JavaScript I used:

Code:

$("a").click(function(){
    $(".menu a.selected").removeClass("selected");   // remove previous class if there is any
    $(this).addClass("selected");                             // add class to the clicked link
    return false;                                                              // prevents browser from following clicked link
});

And here is the HTML. The "xtrig" class is required for it to be used as an external trigger for the slider.

Code:

<ul class="menu">
		<li class="day1"><a class="selected xtrig" href="#1" rel="coda-slider-1">Day 1</a></li>
		<li class="day2"><a class="xtrig" href="#2" rel="coda-slider-1">Day 2</a></li>
		<li class="day3"><a class="xtrig" href="#3" rel="coda-slider-1">Day 3</a></li>
                 <li class="day4"><a class="xtrig" href="#4" rel="coda-slider-1">Day 4</a></li>
</ul>

Any ideas why it would take two clicks for it to function? Thanks!

Hello I want to add something to my web site. when the user clicks to download. i want to see a pop up screen which says your download has started.

<script type="text/javascript">
function show_alert()
{
alert("Your Download Started!");
}
</script>

<input type="button" onclick="show_alert()" onclick="get value="Download" />

I dont get where should i put the download link

Hi Everyone,

I want to execute a script when the user clicks the button.

Currently in my html doc. i have the button declared.
<input type="button" id ="button" onclick='notEmpty() value="Play"/>

When the button is clicked, i execute the notEmpty() function and I want to execute a script inside the notEmpty(). How can i do this?

Thanks,
Praveen

i'm working with a javascript on a drupal website, but the saving function seems to work only as soon as i click 2 times on the "save" button. the code that fires the function is:

Code:

var param ="&usuario="+usuario+"&nivel="+nivel+gano+porc_gano+gasto+porc_gasto+tengo+porc_tengo+debo+porc_debo+plazo_debo;
var s = document.createElement("script");
s.type = "text/javascript"; s.async = true;
s.src = direccion_servidor +"setMisDatos?callback=respuestaGuardarMisDatos&param="+encodeURIComponent(param);
h = document.getElementsByTagName("script")[0];
h.parentNode.insertBefore(s, h);

i got the parentNode.insertBefore code from google (the same they use in google analitycs), but still i get error (specifically when he has to do the parentNode.insertBefore part (earlier it was only appendChild, but used to give me the same kind of error. Are the spaces a problem in this sense? Or there might be a better solution? because if i click the second time it enters the setMisDatos function and then works 100%. This is really driving me crazy, can anybody help me?

Okay, so I built up 2 codes, which do the same cause. but which one would be most efficient? or maybe which one would be best compatible for browsers?

CODE 1 :

- this code allows for me to use an #id
Code:

<a onclick="trackClick('1');" href="http://www.google.com" rel="nofollow" target="_new">(track 1)</a>

function trackClick(trackid) {
    ajax = ajaxFunction();
    var url = base_url+ "app_trackClicks.php";
    url = url+ "?trackid=" +trackid;
    ajax.open("GET",url,true);
    ajax.send(null);
}

CODE 2
- using the REL
Code:

<a rel="randomclicks" href="http://www.google.com" rel="nofollow" target="_new">(track 2)</a>

function addLoadEvent(func)
{
    var oldonload = window.onload;
    if (typeof window.onload != 'function'){
        window.onload = func;
    } else {
        window.onload = function(){
        oldonload();
        func();
        }
    }

}

addLoadEvent(randomclicks);

function randomclicks()
{
    if (!document.getElementsByTagName){ return; }
    var anchors = document.getElementsByTagName("a");

    // loop through all anchor tags
    for (var i=0; i<anchors.length; i++){
        var anchor = anchors[i];

        if ((anchor.getAttribute("rel") == "randomclicks")){
            anchor.onclick = function () 
            {
                ajax = ajaxFunction();
                var url = base_url+ "app_trackClicks.php";
                url = url+ "?randomclicks";
                ajax.open("GET",url,true);
                ajax.send(null);
            };
        }
    }
}

Thanks

Hi,
I'm a javascript noob, and I am doing a project for CS. I got the page to look how it is supposed to, but it does not work correctly. The input boxes should display a number between 1-4 in the output boxes, but the box displays [object HTMLInputElement] instead. And the buttons all perform their task to one output box, not their own output box. Sorry if that was confusing. Please take a look.


<html>
<!-- esp.html Nick Bravante -->
<!-- C -->
<!-- ======================= -->

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBox
{
var number;

number = RandomInt(1, 4);

document.getElementById('messageBox').value=
"You guessed " + guessOne + " My number was " + number + ".";
}

</script>
</head>


</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessOne" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 1"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBox" size="90" />
</p>
</body>

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBoxTwo
{
var number;

numberTwo = RandomInt(1, 4);

document.getElementById('messageBoxTwo').value=
"You guessed " + guessTwo + " My number was " + numberTwo + ".";
}

</script>
</head>

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBox
{
var number;

numberThree = RandomInt(1, 4);

document.getElementById('messageBox').value=
"You guessed " + guess + " My number was " + numberThree + ".";
}

</script>
</head>

</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessTwo" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 2"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBoxTwo" size="90" />
</p>
</body>

</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessThree" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 3"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBoxThree" size="90" />
</p>
</body>

<head>
<center>
<title> <h1> ESP Tester </h1> </title>
<script type="text/javascript"
src="http://dave-reed.com/book/random.js">
</script>
<script type="text/javascript">
function PickNumber()
// Results: displays a random number in messageBox
{
var number;

numberFour = RandomInt(1, 4);

document.getElementById('messageBoxFour').value=
"You guessed " + guessFour + " My number was " + numberFour + ".";
}

</script>
</head>


</br>
<body>
Enter your Guess(1-4).<input type="num" id="guessFour" size="4" value="" />
</body>

<body>
<p style="text-aign:center">
<input type="button" value="Guess 4"
onclick="PickNumber();" />
<br />
<input type="text" id="messageBoxFour" size="90" />
</p>
</body>
</html>

How to detect if the user clicked cancel while uploading a file ? Is there an event for it?

I'm kind of new to javascript so forgive me for my ignorance.

Is their anyway to track right mouse click within an iframe that is linked to an external site (i.e. www.nbc.com)?

I'm trying to see if I can have a alert window say "This is an image" when i right click on an image within the iframe.

Hi all,

I currently have this javascript that will change the cell to green with one click...

Code:

<script type="text/javascript">
    	function ColorChange(obj){
			obj.style.color='#FFFFFF';
			obj.style.backgroundColor='#66CC33';
			obj.parentNode.style.backgroundColor='#66CC33';
		}
    </script>

echo "<td align=\"center\" bgcolor=\"#EEEEEE\"><a href=\"#\" onclick=\"ColorChange(this)\">$day_num</a></td>";

the problem is that I need around 3 different colors to be possible..

e.g. 1 click turns cell green | 2 turns is red | 3 turns it orange.

I'm not sure how to take this javascript further?

Would someone be kind enough to point me in the right direction?

Many thanks,

Greens85

First, I did this for testing
Code:

<script type="text/javascript">
<!--
var cururl = window.location.href + "?style=1"
document.write(cururl);
//-->
</script>

and it works. It gets the current url of the page and appends ?style=1 then writes out the URL.

However getting it as a clickable link is what's stumping me.
Code:

<script type="text/javascript">
<!--
function goURL()
{
window.location.href + "?style=1"
}
//-->
</script>

<a href="javascript:goURL()">Go There</a>

Doesn't work in my test. As you can probably see, I'm not very well versed in javascript.

Hi all,

I am working with a php code that I am trying to edit a bit. The last part I am trying to change I cannot figure out.

Essentially I want to change the "Login" submit button to just a text link that says "Login" instead.

Quote:
<form action="<?php echo JRoute::_( 'index.php', true, $params->get('usesecure')); ?>" method="post" name="login" id="form-login" >
<?php echo $params->get('pretext'); ?>

<input id="modlgn_username" type="text" name="username" class="inputbox" alt="username" size="15" value="<?php echo JText::_('Username') ?>" onclick="login.username.value='';" />&nbsp;
<input id="modlgn_passwd" type="password" name="passwd" class="inputbox" size="15" alt="password" value="<?php echo JText::_('Password') ?>" onclick="login.passwd.value='';" />&nbsp;



<?php if(JPluginHelper::isEnabled('system', 'remember')) : ?>

<label for="modlgn_remember"><?php echo JText::_('Remember me') ?></label>
<input id="modlgn_remember" type="checkbox" name="remember" class="inputbox" value="yes" alt="Remember Me" />&nbsp;

<?php endif; ?>
<input type="submit" name="Submit" class="button" value="<?php echo JText::_('LOGIN') ?>" />&nbsp;



<?php
I am hoping this is just a minor change. Would someone mind showing me what I have to do?

Thanks very much.