创建一个JavaScript函数来更改先前声明的变量

Question

I am having trouble changing a variable on a page with lots of PHP and JavaScript.

This part is working fine for me:

<script language="javascript" type="text/javascript">
function changebg(my)
{
    document.getElementById("imglayer").style.backgroundImage ='url('+ my.src +')';
    document.getElementById("cropframe").style.backgroundImage ='url('+ my.src +')';
}
var test2 = new String("url('+ my.src +')");
</script>

<img src="../../uploads/595MCoDFyArFFe.jpg" width="50" height="50" onclick="changebg(this)" >
<img src="../../uploads/P6l6J8aqzli6gh.jpg" width="50" height="50" onclick="changebg(this)" >
<img src="../../uploads/stXWS8fL4L3nvs.jpg" width="50" height="50" onclick="changebg(this)" >

with the div IDs being called for later.

My issue is I have another variable that I need to change dynamically:

<script type="text/javascript">
    var test1 = new String( "<?php $src_name = '" );
    var test2 = new String( "956ENbXjzTlkBo.jpg" );
    var test3 = new String( "'; // modify this, original file?>");" );
    document.write( String( test1, test2, test3 );
</script>

I need var test2 to change with the other two which are being grabbed by the div ID. How do I change that string value? Is this even possible?

Any help would be greatly appreciated!

Answer 1

First of all, this is not Java (and even in Java you do not really need it). You should not use new String(…) ; simply use string literals:

var test1 = "…";

etc.

Second, strings are immutable; you cannot change a string value/object; you can only create and assign a new string. However, you can also create a user-defined Object instance that has a method that returns a value according to other values (like variable values):

var test2 = {
  toString: function () {
    return "foo" + test1 + "bar";
  }
};

The document.write() DOM method implicitly converts its argument to string, which is done by calling either the hull object's toString() or valueOf() method, whichever is available first (see the ECMAScript Language Specification, 5.1 Edition, section 9.8 ). So

document.write(test2);

is equivalent to

document.write(String(test2));

( section 15.5.1 ) or

document.write(test2.toString());

It will write the return value of the toString() method of the object referred to by the value of test2 . (For dynamic change of the output, you need to use other DOM features, such as the standards-compliant textContent , nodeValue , or the proprietary innerHTML property.)

BTW, the String constructor only considers one argument (see above), so new String(x, y, z) is equivalent to new String(x) . Perhaps you were looking for concatenation: new String(x + y + z) . But if at least one operand is of type String , x + y + z suffices; if not, String(x) + y + z or "" + x + y + z works.

Answer 2

Just use the right quotes:

var test2 = new String("url(" + my.src + ")");

Or simply:

var test2 = "url(" + my.src + ")";

However, you can't change a php variable by writing php code from Javascript. When the Javascript runs, the php script has aready ended.

Answer 3

First off, you're going a very weird way about building a string. I assume the point of this is to, at the end of all of this, end up with a string that looks like this:

<?php $src_name = 'X'; // modify this, original file ?>

(This outputs PHP, which won't be interpreted by your web server, but I'll assume you know that and you're outputting it for other reasons.)

Where x is some piece of data that's available in some other DOM element (one of your img elements, perhaps, since the filenames are similar). If you then want to, after some future arbitrary event occurs, update this x value that has been printed to the page. You'll need to give yourself some tangible element to update - for example, a span element.

Try document.write() ing this :

document.write("&lt;?php $src_name = '<span id=\"my-element\">X</span>'; // modify this, original file ?&gt;");

Note I've changed your < and > to their encoded equivalents.

Then, you can update the contents of your span using JavaScript at a later date (see below). This isn't changing the variable you have declared, but rather it is changing the contents of the page. Since you are just printing your string at the end of it all (or, trying to, since String() won't concatenate the given strings like you seem to think it will), it seems to me like this is what you're trying to accomplish.

document.getElementById("my-element").innerText = "NEW VALUE";

Again, this is not updating the variable , per se, just updating the text that you are printing to the page. This seems to be your end goal anyhow, correct me if I'm wrong.