Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm watching a basic tutorial series on javascript and have been stuck on this super simple script for like close to 30 minutes now. I used an html validator and it all checks out with no errors. However, the code is still not behaving how it should according to the video.
When you type "click me" its supposed to show a dialog box saying 'please enter a real value into the box'. And when you enter a value in the field, it's supposed to substitute the title for whatever you entered.
Sorry for the simple nooby question
EDIT AGAIN: Thanks Arby. That got it working.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script type="text/javscript">
function substitute () {
var myValue = document.getElementById(myTextBox).value;
if (myValue.length == 0){
alert('Please enter a real value in the text box!');
return;
}
var myTitle = document.getElementById('title');
MyTitle.innerHTML = myValue;
}
</script>
</head>
<body>
<h1 id="title">JavaScript Example</h1>
<input type="text" id="myTextBox" />
<input type="submit" value="Click Me" onclick="substitute()" />
</body>
</html>
I found some issues with your code, just simple stuff that every beginner goes through (I did), I'll bullet them off:
MyTitle isn't myTitle, JavaScript variables are case-sensetive.
You should stay away from the onclick attribute; he's a bad influence. The point, inline JS is generally not a good idea.
So I added an event listener event instead: [...].addEventListener("click", callback);
Your DOM request to the input box used an undefined variable/object/etc. called myTextBox, instead of a string "myTextBox".
Anyway, I made a JSFiddle for the code, so I could test it, so here is the link to the code with the edits I explained above: https://jsfiddle.net/Lktzw0Lh/
A slightly different approach - since you list jQuery in the tags for this - i have rejigged the code to take advantage of it. I put an onclick event handler on the button which, when clicked gets the value of the textbox and if it is empty - gives the alert. If it is not empty - it swaps the h1 text for the entered text and clears the text input and gives it focus so that you can re-enter new content.
Note that the click handler is in the javascript section and not inline js and also that with jquery - you can chain together commands that affect the same element.
$(document).ready(function(){
$('#testButton').click(function(){
var myValue = $('#myTextBox').val();
if (myValue == ''){
alert('Please enter a real value in the text box!');$('#myTextBox').focus()
}else{
$('#title').text(myValue);$('#myTextBox').val('').focus()
}
})
})
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<h1 id="title">JavaScript Example</h1>
<input type="text" id="myTextBox" />
<button id="testButton" type="button">Click Me</button>
</body>
</html>
Related
I modify a code like that, for click a checkbox.
Such as,
Is there a any problem about button name or id. I could see just name and class. Is this a problem for work?
<html>
<head>
</head>
<body>
<button>Giris</button>
</body>
<script type="text/javascript">
var chkA5 = "button" class=formCheckBox type=checkbox value=ON name=chkA5
window.onload = function() {
document.getElementById("chkA5").checked = true
});
}
</script>
</html>
I copied all chechbox button properties on web site (F12 + Slect Element + click to check box) and pasted in my script. But I really confused, when I write a code in script, describing works for new things which I add or create. On this web site which I want to click a chechbox on has already buttons and text/check box. How can I create a connect with each other my scrips and web site.
In brief; I couldn't connect my scripts to web site's button and because of that I couldn't do any operation. Am I right?
How can I solve this problem? On picture which I shared, there are some code marked in a red square. This code works for desciribe some element in my scribs?
When we use document.get.ElementById().checked =true, on web site's element properties's has not a id? It has name and class.
Problem 1: getElementById should be getElementByName
Based on your screenshot, the input item you are trying to reference is:
<input name="chkA5" class="formCheckBox" type="checkbox" value="ON"></input>
and you are trying to getElementById()
document.getElementById("chkA5").checked = true
However, there is no id declared, so you will have to get the item by the name, using getElementByName():
document.getElementsByName("chkA5")[0].checked = true;
Problem 2: Your javascript has errors
This line will cause your script block fail:
var chkA5 = "button" class=formCheckBox type=checkbox value=ON name=chkA5
If you require a complete code sample, here is an example:
<html>
<head>
</head>
<body>
<input name="chkA5" class="formCheckBox" type="checkbox" value="ON"></input>
</body>
<script>
(function() {
document.getElementsByName("chkA5")[0].checked = true;
})();
</script>
</html>
Note: Make sure that the script block is at the end of your html, like in your example code provided.
I feel a bit silly asking this question, since most of the questions people ask on here are way beyond my level as a programmer, but at least I know I'm in good hands as far as asking goes. I used to know how to make simple vbscript and javascript programs, but I'm a bit rusty. I'm trying to refresh myself, and despite repeated google/other searches, can't recall how to make it so that when a button is clicked, a msgbox appears. Also, I'd like to know how to modify the .value attribute of a textbox. I'm attempting this in vbscript for now, but I'll try javascript if anyone knows a way to do it in that instead. My ultimate goal is a text based type game where you can click buttons labeled, "north,south,west,east", and make it like an rpg. The textbox would display the current room description.
Here's the code I have so far, which isn't displaying the msgbox.
<html>
<title>Explor-o-Rama!</title>
<body>
<form name = frmMain>
<textarea name = "txtDisp" rows = "10" cols = "50"></textarea><br>
<input type = "button" name = cmdTest value = "test">
</form>
<script language = "vbscript">
sub cmdTest_OnClick
msgbox "test"
end sub
<script>
</body>
</html>
You have:
msgbox "test"
The correct command is:
MsgBox("test")
OR
X=MsgBox("test")
This SHOULD DO IT.
also, <html><body><script language=vbscript>msgbox "" </script></body></html> not works.
but this code works OK:
<html><body><script>alert('Test');</script></body></html>
<html>
<body>
<script>
function test()
{
alert('Test');
}
</script>
<input type = 'button'; onclick='test()'>
</body>
</html>
Probably, it's a IE internal bug.
Here is my coding.. What have I done wrong. I am on number 6 and it is not working Can someone please look at this and give me some help.?
Thanks
<html>
<head>
<title> My Homework </title>
</head>
<body>
<div style="width:400px; height:200px" id="firstdiv">
<br /> <br /><center>Well Hi there! <br/> Answer the prompt to see what happens next.</center>
</div>
<script type="text/javascript">
var moquestion = window.prompt("What is the capital of Missouri?","");
if (moquestion.length < 1) {
<div style="width:400px; height:200px" id="sorrydiv">
<br /> <br /> <h1><center>Sorry you don't feel like playing.<br />The capital of Missouri is Jefferson City</center></h1>
</div>
}
</script>
</body>
</html>
Below is the assignment
Create a webpage with all the basic HTML tags.
Inside the <body>, create a <div> tag with an element id.
Insert some text into the <div> tag.
Add your script below this <div> so that it will not attempt to run until the has loaded.
Use the window.prompt method to ask “What is the capital of Missouri?” Ensure that no default answer is displayed for the user.
Check to make sure the length property of the returned string is not less than 1. If it is empty, write something like the following into the <div> tag: “Sorry you don’t feel like playing. The capital of Missouri is Jefferson City.”
If the string is not empty, use the window.confirm method to ask the user: “Is that your final answer?”
If they confirm, write a string similar to the following into the tag: “The capital of Missouri is” + myanswer + “. So says you.”
If they cancel, ask the question again: “Well then what is the capital of Missouri?” This time, write the answer without error checking.
The main problem with your code is that you are using HTML-Code within your JavaScript code.
The <script type="text/javascript">-tag tells your browser: Execute the next block using your default JavaScript-Engine. But JavaScript Engines aren't able to render or even understand HTML Code.
Start creating a simple template:
<!DOCTYPE html>
<html>
<head>
<title>Homework No. 6</title>
</head>
<body>
<!-- place the script at the bottom to execute
AFTER the whole page has loaded. -->
<script type="text/javascript">
// create the DIV Tag and insert it
// Answers: question 2 & 3
// THIS IS WHERE THE HTML-ELEMENT KICKS INTO THE PAGE
var div= document.createElement("div");
div.innerHTML = "Lets play!";
div.id = "questionContainer";
// Insert the element into the body
document.body.appendChild(div);
var question = window.prompt("What is the capital of Missouri", "");
// check if the question is empty
if (question.length < 1 || typeof question === "undefined") {
div.innerHTML = "Sorry you don't feel like playing :(";
return;
}
// check if user is sure (and repeat the question if he's not.)
if (!window.confirm("Are you sure?"))
question = window.prompt("What is the capital of Missouri", "");
div.innerHTML = "The capital of Missouri is: " + question + " as you told me.";
</script>
<body>
</html>
This should solve the problem. Just remember: Do not mix JavaScript and HTML.
Also: Check out this jsFiddle to view it in action: http://jsfiddle.net/du4CH/
It doesn't mean write a new div tag, it means to change the contents of the tag you've already written, the one you called "firstdiv".
Point 6 is actually saying to "write it into the div tag". Assuming that it means the div that you created earlier you should be looking at locating the div on the document and then writing to its innerHTML. Something like
if (moquestion.length < 1) {
document.getElementById("firstdiv").innerHTML="Sorry you don't feel like playing";
}
should do the trick.
I'm trying to make a magic eight ball simulation, but it's not working for me. The inspector element in Chrome shows no errors, so I'm confused why it won't work. Any suggestions would be greatly appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Project 4: Consistent</title>
<!-- This part is the function to create my magic eight ball that will randomly give a result, but for certain questions,
it will provide the same answer always to fool their minds. -->
<script>
var answerMap = {}
var images = ['eightBallYes.png', 'eightBallNo.png', 'eightBallMillionYears.png', 'eightBallAskLater.png', 'eightBallReally.png'];
//I actually had a little bit of difficulty with this part of the project.
//The answer.search method you showed us in class for some reason is not working for me.
//I worked with the GTF on this part
function eightBall() {
var answer = document.getElementById("answerBox").value;
answer = answer.toLowerCase();
if (answer.search(/[r]/) > 0 ) {
var yes = '../Images/eightBallYes.png'
return yes;
}
if (answer.search(/[m]/) > 0 ) {
var no = '../Images/eightBallNo.png'
return no;
}
}
window.onload = alert('Welcome to my Project 4')
</script>
</head>
<body>
<body style="background:#EEEE17">
<!-- This part of the page will simulate a magic eight ball that will provide at least 4 answers.
When certain questions are asked, it will return the same answers. This is honestly a pretty cool project to work on. -->
<div style="text-align:center">
<h1>Project 4: Booyah!</h1>
<img src="../images/eightBallTemplate.png" >
<h2>Magic 8-Ball Game</h2>
<input type="text" id="answerBox" value="Please ask a question">
<input type="button" value="Submit for Magical Results" onclick='eightBall()'/>
<div id="myOutput"></div>
<hr>
Old MacDonald In-Class Activity
<br>
Parameter In-Class Activity
<br>
jQuery In-Class Activity
<br>
String In-Class Activity
<footer>
<p>
© Copyright by Alan Sylvestre
</p>
</footer>
</div>
</body>
You aren't doing anything with the return value of your function.
You probably want to assign it to the <img> tag's src property.
The problem I see is that you are calling the eightBall function when the button is clicked and the right value is chosen, but you are not doing anything with it, e.g. appending a node in the myOutput div.
You also have two body tags.
Im trying to make a contact form where people will check either "one way" ticket or "roundtrip".
The first "one way" is checked when user reach the contact form and one(1) date field is shown, but if "roundtrip" is checked i want a 2nd date field to be shown with a return date.
Any ideas?
Simply observe the onchange event for the radio button. When it reaches you can check weather single trip or round trip is selected and then show / hide the div with the return date fields.
<!DOCTYPE html>
<head>
<script>
function hdl_change(e) {
document.getElementById('date2').style.visibility =
e.checked && e.id == 'opt_2' ? 'visible' : 'hidden';
}
</script>
</head>
<body>
<form name="myForm">
<input id="opt_1" type="radio" name="trip" value="oneway" onchange="hdl_change(this)"> One way<br>
<input id="opt_2" type="radio" name="trip" value="round" onchange="hdl_change(this)"> Roundtrip<br>
</form>
<div id="date1"> date 1 stuff ...</div>
<div id="date2" style="visibility:hidden"> date 2 stuff ...</div>
</body>
</html>
You would need to use javascript and on-event handlers to accomplish that, as such dependent/binding functionality doesn't come with the regular html form elements (To avoid confusion: same goes for it's potential children).
This answer will give you a pretty good hint how to do it as it answers a question related to a similar problem/request: https://stackoverflow.com/a/5137316/1093284
Update:
As you don't seem very experienced, here's a most simplistic example:
<!-- include jquery.js library first (http://jquery.com/) -->
<script src="jquery.js"></script>
<!-- then work the magic -->
<script>
$(document).ready(function(){
$('#inputB').hide;
$('#checkboxA').click(
function(e){
$('#inputA').show;
$('#inputB').hide;
});
$('#checkboxB').click(
function(e){
$('#inputB').show;
$('#inputA').hide;
});
});
</script>
And if you're fit enough to go pro with jQuery, check the other answer here on this page at https://stackoverflow.com/a/11743381/1093284
Last but not least, I think the answer here at https://stackoverflow.com/a/11743482/1093284 provides the best solution, as it's small and does not require a full-blown 32kb javascript library. On the other hand, inline javascript is actually a no-go. Whatever... it's the users that count and they will prefer a quicker-loading page over nicely coded stuff behind the curtains.