onclick event requires 2 clicks

[akshay1728]

i have button.js file which contains 2 fuction

button.js

function displayclue()
	{
		
  $("#butt").click(function(){
    $("#clue").load('clue.txt');
  });
return false;
	}
	
	
	
function displayclue1()
	{
		
  $("#but").click(function(){
    $("#clue1").load('clue1.txt');
  });
return false;
	}

and my html code is

 <p id="clue1"> WANT CLUE CLICK HERE <button id="but" onclick="displayclue1()"> GET CLUE </button></p>p
    <br />
    <br />    
    <p id="clue">NEXT CLUE <button id="butt" onclick="displayclue()"> NEXT CLUE</button> </p>

first button requires only one click while second button requires 2 click
what is wrong with my code??i tried lot of things but no result
thank you

[jscheuer1]

When you're using jQuery you don't need onclick events inline in your HTML. And one would assume that the Next Clue shouldn't be available until the First Clue is seen. So:

jQuery(function($){
	 $("#but").click(function(){
		$("#clue1").load('clue1.txt');
		$("#butt").click(function(){
			$("#clue").load('clue.txt');
		}).attr('disabled', false);
	});
});

and:

<p id="clue1"> WANT CLUE CLICK HERE <button id="but"> GET CLUE </button></p>
    <br />
    <br />    
    <p id="clue">NEXT CLUE <button id="butt" disabled> NEXT CLUE</button> </p>

But, if you just want it the way it was, but working on a single click for each:

jQuery(function($){
	 $("#but").click(function(){
		$("#clue1").load('clue1.txt');
	});

	$("#butt").click(function(){
		$("#clue").load('clue.txt');
	});
});

and the HTML part, without the disabled:

<p id="clue1"> WANT CLUE CLICK HERE <button id="but"> GET CLUE </button></p>
    <br />
    <br />    
    <p id="clue">NEXT CLUE <button id="butt"> NEXT CLUE</button> </p>

[akshay1728]

it works, thank you very much
god bless you