I am trying to complete a simple exercise to test my JavaScript skills at processing input elements from a form. The object of the game is to retrieve current values from the form input elements, make a story from them, and output that story in the 'story' div. However, when I click the 'Lib It!' button, the function is not getting called, and the text is not being replaced. Any ideas as to why this is not happening?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Mad Libs</h1>
<ul>
<li>Noun: <input type="text" id="noun">
<li>Adjective: <input type="text" id="adjective">
<li>Someone's Name: <input type="text" id="person">
</ul>
<button id="lib-button" onclick="makeMadLib">Lib it!</button>
<div id="story">Placeholder Text</div>
<script type="text/javascript" src="exercises.js"></script>
</body>
</html>
JavaScript:
function makeMadLib(){
var noun = document.getElementById("noun").value;
var adjective = document.getElementById("adjective").value;
var person = document.getElementById("person").value;
var story = document.getElementById(story);
story.firstChild.nodeValue = person + "likes taking photographs of" + adjective + noun;
}
Thanks,
Robert
London, Uk
First we forgot to use parentheses when calling the madLib function. Change onclick="makeMadLib" to onclick="makeMadLib()". Then in our madlib function we need to add quotes around the story in document.getElementById() : var story = document.getElementById("story");. Finally to output our text all we have to do is use innerHTML.
HTML
...
<button id="lib-button" onclick="makeMadLib()">Lib it!</button>
...
JS
...
var story = document.getElementById("story");
....
story.innerHTML = person + " likes taking photographs of " + adjective + " " + noun;
Related
Hey so I am new to using JS and HTML and still practicing the language, I am trying to print out the user name of both players but without using alert. I want to print the player's names and later going to change it up using CSS but having trouble with the simplest way of printing user inputs I have this so far and was wondering why it is not working, any help will be appreciated.
function welcome(){
var first = document.getElementById("FirstName").value;
var last = document.getElementById("LastName").value;
var Print_name = "Welcome " + first +" "+ last;
console.log(Print_name);
}
<!DOCTYPE html>
<html>
<head>
<title>Print Names</title>
</head>
<body>
<form method="get">
<label for="Player1Name">Player 1 Name:</label>
<input type="text" id="Player1Name" name="player1Name" placeholder="Name"><br>
<label for="Player2Name">Player 2 Name:</label>
<input type="text" id="Player2Name" name="player2Name" placeholder="Name"><br>
<input type="submit" value="Submit" class="btn">
</form>
<script>
/*javascript code here*/
</script>
</body>
</html>
You should find an HTML element (with id="Player1Name") and (with id="Player2Name").
Try it code in HTML
<input type="submit" value="Submit" class="btn" onclick="welcome()">
Try it code in JavaScript
function welcome(){
var first = document.getElementById("Player1Name").value;
var last = document.getElementById("Player2Name").value;
var Print_name = "Welcome " + first +" "+ last;
alert(Print_name);
}
your document.getElementById is referencing the wrong Id.
So if you text field is defined as
<input type="text" **id="Player1Name"** name="player1Name" placeholder="Name">
Then what you should be doing is document.getElementById("Player1Name").value
The same goes with the Player2Name field.
I'm trying to generate a link from given values in a form that will allow the user that follows the resulting link to go directly to a certain area of a website based on the information they enter. However, when I try my current method, the web application kicks out the user when they follow the link because the span tag is being left behind in the link and it perceives it as malicious.
Here's what I have as of now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head lang="en">
<title>Example Link Generator</title>
<meta charset="UTF-8">
<script language="JavaScript">
function showInput() {
document.getElementById('displaycust').innerHTML =
document.getElementById("cust").value;
document.getElementById('displayjob').innerHTML =
document.getElementById("job").value;
document.getElementById('displaysite').innerHTML =
document.getElementById("site").value;
document.getElementById('displayname').innerHTML =
document.getElementById("name").value;
}
</script>
</head>
<body>
<form>
<legend><b>Example Link Generator</b></legend>
<br>
<br>
CustId= (Cengage is default):<br>
<input type="text" name="cust" maxlength="40" id="cust" value="AC2BB2C8AD16284FA51A8D42D7D1D526">
<br><br>
JobId=:<br>
<input type="text" name="job" maxlength="40" id="job" value="">
<br><br>
Site (07 is Offset, 13 is Digital):<br>
<input type="number" name="site" maxlength="2" id="site" value="07">
<br><br>
Name (Used as link display text):<br>
<input type="text" name="name" id="name" value="">
<br><br>
</form>
<input type="submit" onclick="showInput();"><br/><br>
<label><b>Link (highlight and copy):</b></label>
<p>
<!-- Problem area-->
<a href="https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite<span id='displaysite'></span>%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3d<span id='displaycust'></span>%26JobId%3d<span id='displayjob'></span>"><span id='displayname'></span>
</a>
<!-- End problem area -->
</p>
</body>
</html>
<br><br><br><br>
<span id='displaycust'></span><br><br>
<span id='displayjob'></span><br><br>
<span id='displaysite'></span><br><br>
When I try to generate a link without display text, clicking on the link will still kick the user out of the web application, but highlighting the text, then copying and pasting the link to the address bar, successfully logs the user in.
That method looks like this:
<!-- Current method without display name for link -->
https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite<span id='displaysite'></span>%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3d<span id='displaycust'></span>%26JobId%3d<span id='displayjob'></span>"
<!-- End current method -->
I would like to be able to generate a link with display text, but eliminate any residual markup language in the resulting URL.
For example, this would be a bad link:
https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite%3Cspan%20id=%27displaysite%27%3E%3C/span%3E%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3d%3Cspan%20id=%27displaycust%27%3E%3C/span%3E%26JobId%3d%3Cspan%20id=%27displayjob%27%3E%3C/span%3E
This would be a good link:
https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite07%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3dAC2BB2C8AD16284FA51A8D42D7D1D526%26JobId%3dAC2BB2C8AD16284FA51A8D42D7D1D526"
Any help in solving this would be greatly appreciated.
You can't have a span tag inside of an HTML attribute, such as the link.
A better approach would be to concatenate the results in JavaScript, then set the link value to the concatenated result
Edit: Here's a code example of my answer:
function showInput() {
var cust = document.getElementById("cust").value;
var job = document.getElementById("job").value;
var site = document.getElementById("site").value;
var name = document.getElementById("name").value;
var generatedLink =
'https://example.com/Site/Pages/Login.aspx?Language=en&Brand=&targetpage=https://example.com%2fSite'
+ site
+ '%2fPages%2fJob%2fJobSummary.aspx%3fCustId%3d'
+ cust
+ '%26JobId%3d'
+ job;
var elementThatYouAreEditing = document.getElementById('displayname');
elementThatYouAreEditing.href = generatedLink;
elementThatYouAreEditing.innerText = name;
}
and your a tag would be
Note that I'm not saying this is the best way to do this, merely a way to do it.
What am i doing wrong? According to the textbook example this is supposed to be sufficient code, but I get NaN when running it in a browser.
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>
<html>
<head>
<title>test</title>
</head>
<body>
<p>Vekt: <input type="text" id="txtVekt" /></p>
<p>Hoyde: <input type="text" id="txtHoyde" /></p>
<button id="btnBeregn">Beregn</button>
<p id="resultat"></p>
<script>
window.onload = beregn();
function beregn(){
var hoyde = document.getElementById("txtHoyde").value;
var vekt = document.getElementById("txtVekt").value;
var bmi = vekt / (hoyde * vekt);
document.getElementById("resultat").innerHTML = "Din BMI er: " + bmi;
}
</script>
</body>
</html>
Your values are not initialized when you first run the function
There's really no need to run the function onload, especially
since your values aren't initialized. Note that my code removes the onload invocation.
You can just run the calculation when the button is clicked. You might also want to add some validation before you run the function, but I'll leave that exercise to you.
<body>
<p>Vekt: <input type="text" id="txtVekt" /></p>
<p>Hoyde: <input type="text" id="txtHoyde" /></p>
<button id="btnBeregn" onclick="beregn();" >Beregn</button>
<p id="resultat"></p>
<script>
function beregn(){
var hoyde = document.getElementById("txtHoyde").value;
var vekt = document.getElementById("txtVekt").value;
//this assumes your inputs are valid numbers...
var bmi = vekt / (hoyde * vekt);
document.getElementById("resultat").innerHTML = "Din BMI er: " + bmi;
}
</script>
</body>
hoyde and vekt do not have any value when the page loads since the inputs are empty, so there is no reason why bmi should give you anything other than NaN.
You need to either give those inputs a default value (probably 1 to begin) and then rerun the begregn function whenever the button is clicked:
<p>Vekt: <input type="text" id="txtVekt" value=1/></p>
<p>Hoyde: <input type="text" id="txtHoyde" value=1/></p>
<button id="btnBeregn" onclick="begregn()">Beregn</button>
Or just don't run begregn on window load, but only when the button is clicked
window.onload runs... on window load. :)
Change window.onload = beregn(); to:
var btn = document.getElementById("btnBeregn");
btn.addEventListener("click", beregn);
I have been struggling with the following code. Basically I took the example Convert string to title case with JavaScript and am using that, I also have a code which takes the name and populates it into a div tag, however, it seems to move the text down, so for example when I type in john smith, I don't get John Smith for the capatalisation and then where it states 's fathers full name it does place the name there but then moves the rest of that text one line down, so 's fathers full name moves one line below john smith, can someone help me figure this out?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hello whirled</title>
</head>
<body>
<h1>Bla Bla
</h1>
<form name="input" action="submit.php" method="post">
<p>
Other Text goes here
</p>
<p>
How do you wish to be referred to informally?
<input id="name1" type="text" name="groominame" onchange="toTitleCase(this.value); fathersName(this.value);" />
</p>
<div id="display1"></div>
's full name:
<input type="text" name="fname" />
<noscript>
<div>
If you can see this then SCRIPTS are turned OFF on your machine and it won't work
</div>
</noscript>
<script type="text/javascript">
function toTitleCase(str) {
alert(str); //test
return str.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}
function fathersName(textarea) {
alert(textarea); //test
document.getElementById("display1").innerHTML = textarea;
}
</script>
</form>
</body>
</html>
<div id="display1" style="float: left;margin: 3px 0px;"></div>
The above code will make it align properly with the text 's full name.
Your function is not working properly and also two functions are not needed.
function fathersName(ele) {
var textarea = toTitleCase(ele);
document.getElementById("display1").innerHTML = textarea;
}
function toTitleCase(ele) {
var str = ele.value;
ele.value = str.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
return ele.value;
}
so input tag changes to
<input id="name1" type="text" name="groominame" onChange=" fathersName(this);"/>
If you just want to use toTitleCase in other fields, then use toTitleCase(this)
DEMO
You need to first turn it into Upper case and then display it. You just return it to nowhere instead of keeping it in a variable or placing it in the right place.
The div moves because at the end of a div there is a new line, if you want there not to be an effect use a span element.
I have created a javascript code that lets the user input something then it should display after the input but my display seems to not work at all, I am using document.getElementById to display the array content per input but it is not working.
Here is my complete code:
<html>
<meta charset="UTF-8">
<head>
<title>Sample Array</title>
<script>var index = 0;</script>
</head>
<body>
<p id = "display">
Input:
<input type="text" id="input">
<input type="button" value="GO" onClick="press(input.value)">
<script>
var sample = new Array();
function press(Number)
{
sample[index] = Number;
document.getElementById("display").InnerHTML += sample[index] + " ";
index++;
}
</script>
</body>
</html>
What seems to be the problem? I am still learning the basics please bear with me.
The problem is with "InnerHTML". The correct syntax is "innerHTML" with small "i".
change
document.getElementById("display").InnerHTML
to
document.getElementById("display").innerHTML
(note the lowercase i
Here's the fiddle
I made two tiny changes that seem to make this work.
First, close the <p> tag so that when you set innerHtml it does not include the inputs.
Second, change InnerHHTML to innerHTML. Methods and properties are case sensitive.
<p id = "display"></p>
Input:
<input type="text" id="input">
<input type="button" value="GO" onClick="press(input.value)">
<script>
var sample = new Array();
function press(Number)
{
sample[index] = Number;
document.getElementById("display").innerHTML += sample[index] + " ";
index++;
}
</script>
First your <p> is not complete;
<p id = "display"></p>
Second its:
document.getElementById("display").innerHTML += sample[index] + " ";