The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Add links to random word generator, HTML
pfrivera
post Nov 2 2014, 03:38 PM
Post #1





Group: Members
Posts: 4
Joined: 2-November 14
Member No.: 21,757
Hello,
I am an art teacher and I created a website with a random word generator where the words are artist, technique, culture, and medium. My students use it as a form of instant inspiration when trying to develop an art project. I would like for the words the come up to be linked to other websites that will give examples. I am having difficulty figuring out how I would add the links to the words. Can some one help?

Here is the code I am using.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR...DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Name Generator Script Demo</title>
<meta name="description" content="A do it yourself name generator from online-generators.com" />

<!-- The Generator script. You can move the script to an external file for better overview -->
<script type="text/javascript">
/* Online Name Generators v.1.0 script is made by Niels Gamborg webmaster at online-generator.com.
* The script is free (as in "free speech" and also as in "free beer") in anyway. Use it after you own likings.
* Peace and love.
*/
function generator(){

var wordlist1 = ["1 Van Gogh","1 Matisse","1 Picasso","1 O'keefe","1 Andy Goldsworthy","1 Monet","1 Munch","1 Lichtenstein","1 Banksy","1 Ansel Adams","1 Miro","1 Dali","1 Warhol","1 Mondrian","1 Toulouse Lautrec","1 Swoon","1 JR","1 Shawn Barber","1 Audrey Kawasaki"];

var wordlist2 = ["2 Impressionism","2 Expressionism","2 Fauvism","2 Graffiti","2 Street Art","2 Graphic Novel","2 Illustration","2 Illumination","2 Renaissance","2 Journal","2 Sculpture","2 Abstract","2 Landscape","2 Portraiture"];

var wordlist3 = ["3 Beijing","3 Tokyo","3 Bangkok","3 San Francisco","3 Northern Europe","3 Greece","3 Rome","3 Indigenous","3 Prehistory","3 Mexico","3 Russia","3 Germany","3 Spain","3 Brazil","3 Middle East","3 Louisiana","3 India","3 Invent a Culture","3 Chile","3 Ireland","3 60's Counter Culture"];

var wordlist4 = ["4 Pen & Ink","4 Oil Pastel","4 Watercolor","4 Recycling Materials","4 Digital","4 Chalk Pastel","4 Acrylic Paint","4 Clay","4 Colored Pencil","4 Paper Mache","4 Paper","4 Animation","4 Fabric","4 Film","4 Collage","4 Printmaking","4 Nature","4 Wire","4 Plaster","4 Mixed Media"]

// Random numbers are made
var randomNumber1 = parseInt(Math.random() * wordlist1.length);
var randomNumber2 = parseInt(Math.random() * wordlist2.length);
var randomNumber3 = parseInt(Math.random() * wordlist3.length);
var randomNumber4 = parseInt(Math.random() * wordlist4.length);
var name = wordlist1[randomNumber1] + " " + wordlist2[randomNumber2] + " " + wordlist3[randomNumber3] + " " + wordlist4[randomNumber4];

//alert(name); //Remove first to slashes to alert the name

//If there's already a name it is removed
if(document.getElementById("result")){
document.getElementById("placeholder").removeChild(document.getElementById("result"));
}
// A div element is created to show the generated name. The Name is added as a textnode. Textnode is added to the placeholder.
var element = document.createElement("div");
element.setAttribute("id", "result");
element.appendChild(document.createTextNode(name));
document.getElementById("placeholder").appendChild(element);
}
</script>

</head>
<body onload="generator()">
<div id="wrapper">

<!-- The generator result and button. Change text on the button by changing button value. Be carefull changing ID's in this part -->
<div id="generator" >
<div id="placeholder"></div>
<input type="button" value="Create Inspiration" onclick="generator()" />
</div>

<div>
<p>1 Artist 2 Technique 3 Culture 4 Material</p>
<p>Use the inspiration generator to help with creating an art project.</p>
</div>

<div id="footer">
<p>This generator is developed with help from the <a href="http://online-generator.com">online name generators</a>.
</p>
</div>
</div>
</body>
</html>

Thank you
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 2 2014, 04:58 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
I think you can do that quite easily.

First add your links to the words in the array. Just be sure to escape quotation marks and slashes in closing tags with backslash. I've done just the first word/name in the first list as an example.

CODE
var wordlist1 = ["<a href=\"http://en.wikipedia.org/wiki/Vincent_van_Gogh\">1 Van Gogh<\/a>","1 Matisse","1 Picasso","1 O'keefe","1 Andy Goldsworthy","1 Monet","1 Munch","1 Lichtenstein","1 Banksy","1 Ansel Adams","1 Miro","1 Dali","1 Warhol","1 Mondrian","1 Toulouse Lautrec","1 Swoon","1 JR","1 Shawn Barber","1 Audrey Kawasaki"];


That's the easy bit. The problem is the script uses createTextNode() that doesn't allow HTML. If you run the script like this the link to wikipedia will show up printed to the page as plain text as the < and > in the HTML will be replaced with their enities.

I'm on thin ice now, but I think I managed to get this right. I replaced createTextNode() with innnerHTML. I tested it and it seems to work. Test it you too, just click away until van Gogh shows up. Then add a few more links and see if it still works. I think it will.

I commented out the line that needs to go and wrote the new line below.

CODE
// element.appendChild(document.createTextNode(name));

element.innerHTML = name;
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Nov 2 2014, 05:22 PM
Post #3


.
********

Group: WDG Moderators
Posts: 9,653
Joined: 10-August 06
Member No.: 7
If I understood this correct the script picks one random item from each of the four lists, for example

CODE
Van Gogh + Renaissance + Prehistory + Acrylic Paint

? In that case it may be hard to find real examples. tongue.gif Even if examples did exist there's a large number of possible combinations.

Linking to a Wikipedia entry for each separate or item (that is, four links in each generator result) like I think pandy suggests should be much simpler.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pfrivera
post Nov 2 2014, 09:35 PM
Post #4





Group: Members
Posts: 4
Joined: 2-November 14
Member No.: 21,757
Thanks for the help! I have not tried it yet, but I will later and let you know how it goes.
Thanks again for taking the time to help me.

QUOTE(pandy @ Nov 2 2014, 04:58 PM) *

I think you can do that quite easily.

First add your links to the words in the array. Just be sure to escape quotation marks and slashes in closing tags with backslash. I've done just the first word/name in the first list as an example.

CODE
var wordlist1 = ["<a href=\"http://en.wikipedia.org/wiki/Vincent_van_Gogh\">1 Van Gogh<\/a>","1 Matisse","1 Picasso","1 O'keefe","1 Andy Goldsworthy","1 Monet","1 Munch","1 Lichtenstein","1 Banksy","1 Ansel Adams","1 Miro","1 Dali","1 Warhol","1 Mondrian","1 Toulouse Lautrec","1 Swoon","1 JR","1 Shawn Barber","1 Audrey Kawasaki"];


That's the easy bit. The problem is the script uses createTextNode() that doesn't allow HTML. If you run the script like this the link to wikipedia will show up printed to the page as plain text as the < and > in the HTML will be replaced with their enities.

I'm on thin ice now, but I think I managed to get this right. I replaced createTextNode() with innnerHTML. I tested it and it seems to work. Test it you too, just click away until van Gogh shows up. Then add a few more links and see if it still works. I think it will.

I commented out the line that needs to go and wrote the new line below.

CODE
// element.appendChild(document.createTextNode(name));

element.innerHTML = name;
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 2 2014, 11:04 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
QUOTE(Christian J @ Nov 2 2014, 11:22 PM) *

Linking to a Wikipedia entry for each separate or item (that is, four links in each generator result) like I think pandy suggests should be much simpler.


As I understood it that's what the OP wants. blink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pfrivera
post Nov 2 2014, 11:58 PM
Post #6





Group: Members
Posts: 4
Joined: 2-November 14
Member No.: 21,757
QUOTE(Christian J @ Nov 2 2014, 05:22 PM) *

If I understood this correct the script picks one random item from each of the four lists, for example

CODE
Van Gogh + Renaissance + Prehistory + Acrylic Paint

? In that case it may be hard to find real examples. tongue.gif Even if examples did exist there's a large number of possible combinations.

Linking to a Wikipedia entry for each separate or item (that is, four links in each generator result) like I think pandy suggests should be much simpler.


That was the idea. I'm new to this, so I probably didn't explain myself. Thanks for the help. biggrin.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pfrivera
post Nov 3 2014, 12:10 AM
Post #7





Group: Members
Posts: 4
Joined: 2-November 14
Member No.: 21,757
QUOTE(pandy @ Nov 2 2014, 04:58 PM) *

I think you can do that quite easily.

First add your links to the words in the array. Just be sure to escape quotation marks and slashes in closing tags with backslash. I've done just the first word/name in the first list as an example.

CODE
var wordlist1 = ["<a href=\"http://en.wikipedia.org/wiki/Vincent_van_Gogh\">1 Van Gogh<\/a>","1 Matisse","1 Picasso","1 O'keefe","1 Andy Goldsworthy","1 Monet","1 Munch","1 Lichtenstein","1 Banksy","1 Ansel Adams","1 Miro","1 Dali","1 Warhol","1 Mondrian","1 Toulouse Lautrec","1 Swoon","1 JR","1 Shawn Barber","1 Audrey Kawasaki"];


That's the easy bit. The problem is the script uses createTextNode() that doesn't allow HTML. If you run the script like this the link to wikipedia will show up printed to the page as plain text as the < and > in the HTML will be replaced with their enities.

I'm on thin ice now, but I think I managed to get this right. I replaced createTextNode() with innnerHTML. I tested it and it seems to work. Test it you too, just click away until van Gogh shows up. Then add a few more links and see if it still works. I think it will.

I commented out the line that needs to go and wrote the new line below.

CODE
// element.appendChild(document.createTextNode(name));

element.innerHTML = name;



It works! Thank you. I do have another question if you have the time. Is it possible to get the links to open in a new tab? I teach K-8 visual arts and some students don't understand the concept of tabs in web browsers rolleyes.gif

Everything is so new to them, and me! tongue.gif

Thanks either way.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Nov 3 2014, 12:44 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
Joined: 9-August 06
Member No.: 6
The same way as you would with an ordinary link. You can't use target="_blank" with the doctype you use. But I don't think it matters much if you do, the validator won't see it hidden in the JavaScript. If you care you have to use JavaScript for that too, i.e. use window.open(). Yes, you can let JavaScript write JavaScript. Just watch what needs to be escaped!

BTW tab or new window depends on the brower and what settings the user uses. There is no "open in new tab", neither in HTML nor in JavaScript. There are only new windows, which may in the browser at use be a new tab instead. Or it may not. You can't know.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Client-side Scripting · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 04:03 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC