javascript - Pass variables to code <input type="image" src="imageSrc;" > - St

admin管理员组

文章数量:1406950

hope someone can help a noob. Many thanks in advance.

I have an index page with links to hundreds of other pages holding song words. I have built each song page but it would be MUCH simpler to have one MASTER page that took a variable from the index page and found the corresponding words (which exist as png graphics.)

I have sorted Step 1 - I can pass a variable from the index page to the master page using:

<a href="javascript: window.open('MUSIC/beatles/mastertest2.html?song=ER', '_parent')">

where song=ER is the variable to display the words for Eleanor Rigby. For Step 2, I can also retrieve that information in the master page with:

var imageSrc = (qs("song")+".png");  document.write(imageSrc);

which will display the text ER.png which is the name of the image I want to display.

For Step 3 I am trying to get this same variable read into:

<input type="image" src="imageSrc;">

to display the picture. I have searched this and other forums for days now and nothing suggested works for me. I could be missing out an essential early step in the coding?

Update:

My master html file has this code to retrieve the variable:

function qs(search_for) {
    var query = window.location.search.substring(1);
    var parms = query.split('&');
    for (var i=0; i<parms.length; i++) {
        var pos = parms[i].indexOf('=');
        if (pos > 0 && search_for == parms[i].substring(0,pos)) {
            return parms[i].substring(pos+1);;
        }
    }
    return "";
}

And it uses this code to disply the variable (appended with .png) just to prove to me that it is getting through:

var imageSrc = (qs("song")+".png");
document.write(imageSrc);

Then I am trying to feed the variable into a routine to display the png selected. The next script doesn't work but I am thrashing about trying anything right now:

var imageSrc = (qs("song")+".png");
document.write(imageSrc);

<input type="image" src="@imageSrc;" border="0" value="Notes" onClick="placeIt(); showIt()">
<input id="song-image" type="image">
var imageSrc = 'ER.png';
var input = document.getElementById('song-image');
input.src = imageSrc;

hope someone can help a noob. Many thanks in advance.

I have an index page with links to hundreds of other pages holding song words. I have built each song page but it would be MUCH simpler to have one MASTER page that took a variable from the index page and found the corresponding words (which exist as png graphics.)

I have sorted Step 1 - I can pass a variable from the index page to the master page using:

<a href="javascript: window.open('MUSIC/beatles/mastertest2.html?song=ER', '_parent')">

where song=ER is the variable to display the words for Eleanor Rigby. For Step 2, I can also retrieve that information in the master page with:

var imageSrc = (qs("song")+".png");  document.write(imageSrc);

which will display the text ER.png which is the name of the image I want to display.

For Step 3 I am trying to get this same variable read into:

<input type="image" src="imageSrc;">

to display the picture. I have searched this and other forums for days now and nothing suggested works for me. I could be missing out an essential early step in the coding?

Update:

My master html file has this code to retrieve the variable:

function qs(search_for) {
    var query = window.location.search.substring(1);
    var parms = query.split('&');
    for (var i=0; i<parms.length; i++) {
        var pos = parms[i].indexOf('=');
        if (pos > 0 && search_for == parms[i].substring(0,pos)) {
            return parms[i].substring(pos+1);;
        }
    }
    return "";
}

And it uses this code to disply the variable (appended with .png) just to prove to me that it is getting through:

var imageSrc = (qs("song")+".png");
document.write(imageSrc);

Then I am trying to feed the variable into a routine to display the png selected. The next script doesn't work but I am thrashing about trying anything right now:

var imageSrc = (qs("song")+".png");
document.write(imageSrc);

<input type="image" src="@imageSrc;" border="0" value="Notes" onClick="placeIt(); showIt()">
<input id="song-image" type="image">
var imageSrc = 'ER.png';
var input = document.getElementById('song-image');
input.src = imageSrc;

• javascript
• variables
• image
• src

Share Follow edited Jan 27, 2013 at 16:27 Olaf Dietsche 74.2k99 gold badges111111 silver badges211211 bronze badges asked Jan 27, 2013 at 12:25 Mike LydiatMike Lydiat 911 gold badge11 silver badge55 bronze badges 1

• I have updated your question with your ments. The code is easier to read in your question. You can always update your question with the small edit link below your question. Please review the changes, if everything is as you intended. – Olaf Dietsche Commented Jan 27, 2013 at 16:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

If you have already <input type="image"> in your HTML page, you must add an id and then set it's src attribute with

HTML:

<input id="song-image" type="image">

JS:

var imageSrc = 'http://www.lorempixel./200/100';
var input = document.getElementById('song-image');
input.src = imageSrc;

JSFiddle for testing.

If I understood you right, its very simple. Are you looking for this?

var input = document.createElement('input');
input.type = 'image';
input.src = imageSrc;
document.body.appendChild(input);

If you can print the variable imageSrc using document.write, then you can use it like shown above.

本文标签： javascriptPass variables to code ltinput typequotimagequot srcquotimageSrcquot gtStack Overflow