I'm trying to get this to work:
I've got string variable in a file called test.js. Depending on some values the file is created by a php script and it says something like: var test = 'up' or: var test = 'down'.
Now, I would like display a certain image on my website depending on the value of var test. So in my html code I add this to the header:
<script type="text/javascript" src="test.js"></script>
Then in the body I write:
<script type="text/javascript">
function Test(){
if (test == 'up'){
document.getElementById("test").src = '/img/arrows/arrow_up.png';
}
else if (test == 'down'){
document.getElementById("test").src = '/img/arrows/arrow_down.png';
}
else {
document.getElementById("test").src = '/img/arrows/arrow_neutral.png';
}
}
</script>
And I add in the image with:
<img id="test" src="" class="test">
However, nothing is displayed on the page. Can someone help me out?
You have to call Test() somewhere, the code below executes it, when the page is fully loaded, so the other .js file has executed(test has been set) and the <img> is on the page.
var test = 'down';
function Test() {
if (test == 'up') {
document.getElementById("test").src = '/img/arrows/arrow_up.png';
} else if (test == 'down') {
document.getElementById("test").src = '/img/arrows/arrow_down.png';
} else {
document.getElementById("test").src = '/img/arrows/arrow_neutral.png';
}
}
window.onload = function() {
Test()
};
<img id="test" src="" class="test">
First of all, try to put manually a src to see if the src is correct :
<img id="test" src="/img/arrows/arrow_up.png" class="test">
If it works, you should call your Test() function somewhere :
window.onload = function() {
Test();
};
To make simplier, you can use JQuery (not obligatory) :
You should add jquery reference to your html page (depending on your scripts folder, the link can change) :
<script src="~/Scripts/jquery-3.2.1.js"></script>
And you can change your Test() methode on this :
function Test(){
debugger;
if (test == 'up'){
$("#test").attr("src", '/img/arrows/arrow_up.png');
}
else if (test == 'down'){
$("#test").attr("src", '/img/arrows/arrow_down.png');
}
else {
$("#test").attr("src", '/img/arrows/arrow_neutral.png');
}
}
Finally, to check if your test parameter is correct, you can put a debugger in order to debug your code in any browser.
If you open the developper tools of your browser, (by pressing on F12 on the browser) you can debug your code. The code will hit the debugger keyword.
Related
The following piece of code autosaves a page but it also times it out by loging out and taking the user to a time out page. How can i chnage it so that it only does the auto save part but not the time out?
<script language='javascript'>
function Save() {
var hdnSessionTimeOut = document.getElementById('fast22_MainCtn_fast44');
hdnSessionTimeOut.value = 'SessionTimeOut';
__doPostBack('Fast22$MainCtn$btnSave', '');
}
function Redirect() {
window.location = "SessionTimeout.aspx"
}
window.onload = function () {
if ('True' == 'True') setTimeout(Save, 30000);
else setTimeout(Redirect, 30000);
}
</script>
I tried reducing it to the following but and I think it worked but it changed the doc to view mode instead of edit mode. and you have to click edit again. Also when it in edit mode, the counter still works and it gives and error. Is there a way to have it auto save and then go back again to edit mode?
<script language='javascript'>
function Save() {
__doPostBack('ctl00$MainContentPlaceHolder$btnSave', '');
}
window.onload = function () {
if ('True' == 'True') setTimeout(Save, 10000);
else setTimeout(Save, 25000);
}
</script>
I want to automatically run a function upon loading the webpage, and then I want to give the option to rerun the function after it's executed.
The following code will work if I the part is not in the database, and will work if instead of using document.write is use alert for displaying the part, but if I use document.write, the button to search again disappears. I think it's because the buttons aren't being re-initialized. I've moved that around and gotten nothing, and tried reloading the webpage, which is functional, but unsatisfactory because of the time it takes.
Is there anyway to prevent the buttons from disappearing, or a better method you recommend?
Thanks in advance.
<!DOCTYPE HTML>
<html>
<body>
<input id="clickMe" type="button" value="Search for Another Part" onclick="search_part();" />
<script type="text/javascript">
function search_part()
{
var part = prompt("Stackoverflow example: ");
if( typeof part === 'undefined' )
{
alert("That part is not in the database.")
}
else
{
document.write( part )
}
}
window.onload = search_part();
document.getElementById("Button").onclick = search_part;
</script>
After DOM is loaded, document.write replaces all content on page. Instead you probably want to have a element container on body and display messages in that.
<input id="clickMe" type="button" value="Search for Another Part">
<div id="messages-here"></div>
<script type="text/javascript">
function search_part () {
var part = prompt("Stackoverflow example: ");
if (typeof part === 'undefined') {
alert("That part is not in the database.");
} else {
document.getElementById('messages-here').innerHTML = part;
}
}
window.onload = search_part();
document.getElementById("clickMe").onclick = search_part;
</script>
I wrote a script to hide and show a loader for my asp.net web application. The script works great when placed inline. I tried to extract the script to an external file and received the following error:
Error: The value of the property 'Pausing' is null or undefined, not a Function object
I tried to look up the error, but I was unable to find a solution to the problem. I am new to asp.net so it may be that I'm not sure how to search for the right question.
My inline code that works is:
<script type="text/javascript">
function Pausing() {
window.setTimeout(ShowLoader, 1);
}
function ShowLoader() {
if ((typeof Page_IsValid === 'undefined') ||
(Page_IsValid != null && Page_IsValid)) {
var i = document.getElementById("loader");
var img = document.getElementById("img");
i.style.display = "block";
setTimeout("document.images['img'].src=document.images['img'].src", 10);
Endpausing();
}
}
function HideLoader() {
var i = document.getElementById("loader");
i.style.display = "none";
}
function Endpausing() {
window.setTimeout(HideLoader, 4000);
}
</script>
The event call is attached to an asp:button control below:
<asp:Button ID="btnGetReport" runat="server" OnClick="btnGetReport_Click" OnClientClick="Pausing();" />
I removed the inline script and replaced with this...
<script type="text/javascript" src="../../Scripts/Loader.js"></script>
Added script to external file:
window.onload = initAll;
function initAll() {
function Pausing() {
window.setTimeout(ShowLoader, 1);
}
function ShowLoader() {
if ((typeof Page_IsValid === 'undefined') || // asp page has no validator
(Page_IsValid != null && Page_IsValid)) {
var i = document.getElementById("loader");
var img = document.getElementById("img");
i.style.display = "block";
setTimeout("document.images['img'].src=document.images['img'].src", 10);
Endpausing();
}
}
function HideLoader() {
var i = document.getElementById("loader");
i.style.display = "none";
}
function Endpausing() {
window.setTimeout(HideLoader, 4000);
}
}
Then I receive the previously mentioned error.
Any help would be greatly appreciated!
Always use ResolveUrl to call your script files like this
Lets assume your script is in Script folder of your root path with a file Name as MyScriptFile.js
<script type="text/javascript" src="<%= ResolveUrl ("~/Scripts/MyScriptFile.js") %>"></script>
EDIT : you can use ResolveUrl or ResolveClientUrl based on your needs
ResolveUrl creates the URL relative to the root where as
ResolveClientUrl creates the URL relative to the current page.
Based on your question : How to use an external javascript file in asp.net
<script type="text/javascript" src="http://www.xyz.com/test.js"></script>
Tried for several times to get below Javscript to execute on page load. Currently it works only on click of "Start" button.
How could this be made excited on load of the page?
<script type="text/javascript">
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName];
}
function start() {
var active = document.getElementById("buttonstart").value == "stop";
getFlashMovie("test").setProperty("src", !active ? document.getElementById('url2').value: null);
document.getElementById("start").value = active ? "buttonstart" : "buttonstop";
}
</script>
the html
<input id="url2" type="text" value="rtmp://localhost/?streammovie=test"/>
The getFlashMovie("test").setProperty is a function to pass variable to the SWF file.
On page load I want it to get executed rather than on button click.
To have your function execute on page load have such code:
window.onload = function() {
start();
};
what you could do is:
<body onload="start();">
if you consider using jQuery at all then you could wrap your code within:
$(document).ready(function(){
//the code
});
the code would execute when the page has been fully loaded, but i do not advise adding the jquery library just so you can use this feature.
Try this:
<script type="text/javascript">
function getFlashMovie(movieName) {
var isIE = navigator.appName.indexOf("Microsoft") != -1;
return (isIE) ? window[movieName] : document[movieName];
}
function start() {
var active = document.getElementById("buttonstart").value == "stop";
getFlashMovie("test").setProperty("src", !active ? document.getElementById('url2').value: null);
document.getElementById("start").value = active ? "buttonstart" : "buttonstop";
}
start(); //added this
</script>
Just make sure the DOM has been loaded before you attempt to access any elements.
Try to run your start() function at the end of the HTML like this;
</body>
<script type="text/javascript">
start();
</script>
</html>
Use:
(function($){
$(function(){
// my code comes here
});
})(jQuery)
Use window.onload event to fire your code on load.
window.onload = function(){
//your code to execute
}
I wrote some html/css/javascript code that was taken verbatim from a javascript textbook. For some reason, the code does not run correctly in my browser (which is the newest version of Firefox). When I click the button, the javascript function "toggleStyle()" does not execute in the browser at ALL. This is the code for the button:
<button type="button" onclick="toggleStyle()">Toggle Style</button>
This is the javascript coding. Note that when I click the button, not even the alert() method is executed:
function toggleStyle() {
alert("toggleStyle() is working.");
var divMessage = document.getElementById("divMessage");
if (divMessage.className === "message-style1") {
divMessage.className = "";
}
else {
divMessage.className = "message-style1";
}
Did you put the code inside <script type="text/javascript">?
<script type="text/javascript">
function toggleStyle() {
alert("toggleStyle() is working.");
var divMessage = document.getElementById("divMessage");
if (divMessage.className === "message-style1") {
divMessage.className = "";
}
else {
divMessage.className = "message-style1";
}
}
</script>
The above code is working:
For starters, I don't see the end } brace; do you have one?
Also, where is the function defined? Does the script get loaded? Are there any errors?