Jump to content

Question On Button control


mfarrell

Recommended Posts

I am very new, so this question my not even be right!

 

Two things have me puzzled. First the SDP button works in my editor.

But the LHS button only produces the alert without loading the heard size.html, why?

 

Then when I attempt to view in CHROME the console reports

Uncaught ReferenceError: LHS is not defined

Uncaught ReferenceError: SDP is not defined

 

Again why? It seems to work in my editor.

 

Thanks for helping a total NOOB! Really I'm lost.

</head>  <body><button name="SDP">Start Dairy Planning</button>  <button name="LHS">Load Heard Sizer</button><script> //loads dairy plan page$(document).ready(function(){ $(SDP).click(function(){        $("#div1").load("image_control.html");    });});</script><script> //loads heard size functions $(LHS).click(function myfunction(){        $("#div2").load("heard size.html");		alert ("Enter Total Number of Milking Head");   });</script></head><body><div id="div2">  </div><div id="div1">  </div>  </body></html>
Link to comment
Share on other sites

The simple answer is just because those variables are not defined. If you're expecting that when you give an element a name that it will automatically create a Javascript variable with that name to point to the element, don't count on it. Not all browsers do that. Give the elements an ID and use document.getElementById to get a reference to it. You can also tell jQuery to select an element based on the value of an attribute, like the name.http://api.jquery.com/attribute-equals-selector/

Link to comment
Share on other sites

You cannot access an element by simply typing a variable name that's the same as the element's name attribute.

 

You must use DOM methods and properties to access elements on the page. These are some of the ones you can use:

Since you have jQuery on your page, you can also use jQuery selectors.

Link to comment
Share on other sites

The simple answer is just because those variables are not defined. If you're expecting that when you give an element a name that it will automatically create a Javascript variable with that name to point to the element, don't count on it. Not all browsers do that. Give the elements an ID and use document.getElementById to get a reference to it. You can also tell jQuery to select an element based on the value of an attribute, like the name.http://api.jquery.com/attribute-equals-selector/

The example shown on that page doesn't appear to do any thing....when I click the radio button(s) nothing changes..?

Link to comment
Share on other sites

The example shown on that page doesn't appear to do any thing....when I click the radio button(s) nothing changes..?

 

If you read what the documentation says you will understand what it is doing.

 

 

Finds all inputs with a value of "Hot Fuzz" and changes the text of the next sibling span.
Link to comment
Share on other sites

You cannot access an element by simply typing a variable name that's the same as the element's name attribute.

 

You must use DOM methods and properties to access elements on the page. These are some of the ones you can use:

Since you have jQuery on your page, you can also use jQuery selectors.

I've read myself in circles on those pages. That would be why I'm asking for help here.

 

An example of what I should do to get what I have to work would go a long way towards my understanding.

 

I've not seen any examples that explain clearly how do I make multiple buttons, and let them an individual function.

As politely as possible I am asking "what or how do I change what I have so that it works.

 

Thanks!

Link to comment
Share on other sites

Try reading the tutorials?

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>tab</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>$(document).ready(function(){  $("#SDP").click(function(){    alert('SDP');  });  $("#LHS").click(function(){    alert('LHS');  });});</script></head><body><button id="SDP">Start Dairy Planning</button> <button id="LHS">Load Heard Sizer</button></body></html>
Link to comment
Share on other sites

 

If you read what the documentation says you will understand what it is doing.

 

Actually it doesn't do anything...I read it, and what I'm expecting to happen is not for the text below to remain "value?"

 

I was expecting it to change to "Hot Fuzz" per the text. It doesn't change, and thus proves to be an example of nothing.

Link to comment
Share on other sites

 

Try reading the tutorials?

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>tab</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>$(document).ready(function(){  $("#SDP").click(function(){    alert('SDP');  });  $("#LHS").click(function(){    alert('LHS');  });});</script></head><body><button id="SDP">Start Dairy Planning</button> <button id="LHS">Load Heard Sizer</button></body></html>

I have, and continue. However they seem to fall short at this stage of my understanding....or maybe I'm falling short of understanding...

 

I can type and retype any of the tutorials and of course they work. Doing small useless things. When I try to do something I need or want, they fail to cover those methods.

I'm sure you were all there at some point.

Link to comment
Share on other sites

Actually it doesn't do anything...I read it, and what I'm expecting to happen is not for the text below to remain "value?"

 

I was expecting it to change to "Hot Fuzz" per the text. It doesn't change, and thus proves to be an example of nothing.

 

In the HTML code, the <span> element contains the text "name?". But after jQuery has been used that text changes to "Hot Fuzz".

Link to comment
Share on other sites

 

Try reading the tutorials?

<!DOCTYPE html><html><head><meta charset="utf-8"/><title>tab</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script><script>$(document).ready(function(){  $("#SDP").click(function(){    alert('SDP');  });  $("#LHS").click(function(){    alert('LHS');  });});</script></head><body><button id="SDP">Start Dairy Planning</button> <button id="LHS">Load Heard Sizer</button></body></html>

Yours is not function in exactly the same manner mine did not function.

The Dairy planner loads.

The Heard Sizer alerts but does not load.

Both documents are local to the one calling it.

 

Thanks!

Link to comment
Share on other sites

 

In the HTML code, the <span> element contains the text "name?". But after jQuery has been used that text changes to "Hot Fuzz".

not in here..I click the top radio button

12345678910111213141516171819202122232425262728293031323334<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>attributeEquals demo</title>  <script src="//code.jquery.com/jquery-1.10.2.js"></script></head><body> <div>  <label>    <input type="radio" name="newsletter" value="Hot Fuzz">    <span>name?</span>  </label></div><div>  <label>    <input type="radio" name="newsletter" value="Cold Fusion">    <span>value?</span>  </label></div><div>  <label>    <input type="radio" name="newsletter" value="Evil Plans">    <span>value?</span>  </label></div> <script>$( "input[value='Hot Fuzz']" ).next().text( "Hot Fuzz" );</script> </body></html>Demo:
Hot Fuzz
value?
value?
Link to comment
Share on other sites

Let me try to simplify the question....

 

why does

<script>$(document).ready(function(){  $("#SDP").click(function(){  $("#div1").load("image_control.html");   }); });   </script> 

work and load, at least in my editor it later fails to load the html in Chrome.

 

and why does

<script> $(document).ready(function(){		 		 $("#LHS").click(function(){   $("#div2").load("heard_size.html");	 	 alert('LHS');  });});</script>

fail, and only the alert portion works?

Link to comment
Share on other sites

The purpose of the example wasn't intended to show "power", it was intended to demostrate how to use that particular jQuery selector.

 

As for why your code isn't working, have you checked the error console? It's probably getting a 404 error.

Link to comment
Share on other sites

I personally distrust and avoid using filenames with spaces in them.

I once got screwed out of a hundred bucks by a file with spaces in the name. I don't trust them either.

work and load, at least in my editor it later fails to load the html in Chrome.

Chrome will put an error message on the console if one occurs. Start there. That code example on its own won't run, because it uses jQuery. It will only run if jQuery has been included prior to that code running.What program are you using where you said it works?
Link to comment
Share on other sites

The purpose of the example wasn't intended to show "power", it was intended to demostrate how to use that particular jQuery selector.

 

As for why your code isn't working, have you checked the error console? It's probably getting a 404 error.

yes, and no 404 error

Link to comment
Share on other sites

I once got screwed out of a hundred bucks by a file with spaces in the name. I don't trust them either.Chrome will put an error message on the console if one occurs. Start there. That code example on its own won't run, because it uses jQuery. It will only run if jQuery has been included prior to that code running.What program are you using where you said it works?

 

 

CoffeCup HTML >>>Let the jokes start now.... I Know..there are probably better choices.

Link to comment
Share on other sites

I can't find a lot of information about what Coffeecup uses to execute Javascript. It looks like it is Windows-only so it might be using the IE components to render the page and execute Javascript, but I'm not sure. It would be interesting to know if your code runs in IE.Can you put the page online anywhere for us to look at?

Link to comment
Share on other sites

I can't find a lot of information about what Coffeecup uses to execute Javascript. It looks like it is Windows-only so it might be using the IE components to render the page and execute Javascript, but I'm not sure. It would be interesting to know if your code runs in IE.Can you put the page online anywhere for us to look at?

Yes, it 'runs' in IE, however it fails in the same manner.

 

The Load Dairy Planner portion loads. OK

The load heard sizer does not; yet the 'alert'! does alert.

 

It would be nice to know why it doesn't work.

Nicer still to see a sample of code that does. (fully) As the earlier suggestion fails in the same fashion as mine.

The only lesson I'm getting from this is what doesn't work, not why it doesn't....which would be helpful.

And no good example of what does work, which would be even more educational.

 

However, thanks for the help so far!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...