asked on

Why is this javscript not working in Chrome?

Hi all,
I have a simple big of JS (shown below), that takes the contents of one textfield, does a bit of converting then writes it to another field.

It works fine in IE, but not in Chrome, can anyone see why?

<script>

function set_filename() {

var filename=document.getElementById('title').value;

filename = filename.replace(/ /img, "_");
filename = filename.replace(/\?/img, "");
filename = filename.toLowerCase()
filename = filename+'.html';

document.getElementById('filename').value=filename;

}

</script>

Open in new window

Gurvinder Pal Singh

not sure what html code you are using, but this one works for me

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script>

function set_filename() {

var filename=document.getElementById('title').value;

filename = filename.replace(/ /img, "_");
filename = filename.replace(/\?/img, "");
filename = filename.toLowerCase()
filename = filename+'.html';

document.getElementById('filename').value=filename;

}

</script>
</HEAD>

<BODY>
	<input type="text" id="title" onblur="set_filename()"/>
	<input type="text" id="filename"/>
</BODY>
</HTML>

Open in new window

Cong Minh Vo

https://www.experts-exchange.com/questions/22067440/opposite-of-getElementById.html

Kiran Sonawane

Looks fine to me in chrome

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<link href="form.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
  set_filename();
});
function set_filename() {
var filename=document.getElementById('title').value;
filename = filename.replace(/ /img, "_");
filename = filename.replace(/\?/img, "");
filename = filename.toLowerCase()
filename = filename+'.html';
document.getElementById('filename').value=filename;

}

</script>
</head>

<body>
<input  type="input" id="title" value="My page?"/>
<input  type="input" id="filename"/>
</body>
</html>

Open in new window

screenshot.png

ienaxxx

Could you please tell us What's the error / wrong behav. it throws?

The only thing can be better done is to identify the space with its proper class \s .

Try with it and please report the problem.

HTH
Bye!

ienaxxx

Yeah, you should be sure to recall the function AFTER the page load, or at least after the creation of the html objects involved.

Since i think you're firing the function onfocus, onblur or while typing in the first field, this is not a problem.

Try replacing / / with /\s/

fox_statton

ASKER

Hi all,
When I click on the button that triggers the behaviour, nothing happens in chrome...
Do you think the button code could be wrong:

<a href="#" onClick="set_filename();"><img src="/wand.gif" border="0" /></a>

Gurvinder Pal Singh

make it

<a href="#javascript:set_filename();"><img src="/wand.gif" border="0" /></a>

Kiran Sonawane

Nothing wrong with button code. Place alert in your function to check whether function is calling or not

Kiran Sonawane

OR try below code whether it is working in chrome or not.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
<link href="form.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

function set_filename() {
var filename=document.getElementById('title').value;
filename = filename.replace(/ /img, "_");
filename = filename.replace(/\?/img, "");
filename = filename.toLowerCase()
filename = filename+'.html';
document.getElementById('filename').value=filename;
}

</script>
</head>

<body>
<input  type="input" id="title" value="test My page?"/>
<input  type="input" id="filename"/>
<a href="#" onClick="set_filename();"><img src="/wand.gif" border="0" /></a>
</body>
</html>

Open in new window

fox_statton

ASKER

Nope, still nothing.
In chrome is not coming up with an error or anything, just not working.

Gurvinder Pal Singh

see if this code works for you, since it works for me

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<script>

function set_filename() {

var filename=document.getElementById('title').value;

filename = filename.replace(/ /img, "_");
filename = filename.replace(/\?/img, "");
filename = filename.toLowerCase()
filename = filename+'.html';

document.getElementById('filename').value=filename;

}

</script>
</HEAD>

<BODY>
	<input type="text" id="title" onblur="set_filename()"/>
	<input type="text" id="filename"/>

	<br>

	<a href="#javascript:set_filename();">Try it</a>
</BODY>
</HTML>

Open in new window

fox_statton

ASKER

That works fine.
But when I put it into my other script it stops working.

Is there a way I can debug js in chrome and see all the errors coming up when I click on a button? Still continues to work in IE.

fox_statton

ASKER

Here is a complete page, which works in IE but not in Chrome....

<html>
<head>
<script>
function set_filename() {
var filename=document.getElementById('title').value;
filename = filename.replace(/ /img, "_");
filename = filename.replace(/\?/img, "");
filename = filename.toLowerCase()
filename = filename+'.html';
document.getElementById('filename').value=filename;

}



</script>



<body bgcolor= "#FFFFFF" text="#000000">

<form action="f.php" method="post" name="form1" target="_parent" id="form1">

     <input type="text" name="title" size="55" value="" > 

 <input name="filename" type="text" id="filename" size="30" value="">

              <a href="#" onClick="set_filename();"><img src="/images/wand.gif" border="0" /></a>
			  </body>
			  </html>

Open in new window

Kiran Sonawane

Check this

<html>
<head>
<script>
function set_filename() { 
var filename=document.getElementById('title').value;
filename = filename.replace(/ /img, "_");
filename = filename.replace(/\?/img, "");
filename = filename.toLowerCase()
filename = filename+'.html';
document.getElementById('filename').value=filename;

}



</script>



<body bgcolor= "#FFFFFF" text="#000000">

<form action="f.php" method="post" name="form1" target="_parent" id="form1">

     <input type="text" name="title" id="title" size="55" value="" > 

 <input name="filename" type="text" id="filename" size="30" value="">

              <a href="#" onClick="set_filename();"><img src="/images/wand.gif" border="0" /></a>
        </body>
        </html>

Open in new window

ASKER CERTIFIED SOLUTION

Kiran Sonawane

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ienaxxx

sonawanekiran is right.
You forget to put the id attrib.

fox_statton

ASKER

Can believe I missed that, thanks guys!