HTML/JavaScript it won't let me append to a div - javascript

<html>
<head>
</head>
<body>
<div id = "start">
<h3>Start</h3>
<script>
if(Go==false)
document.write("<p>None </p>");
else
document.write("<p>Month: Day: Hour: Min: </p>");
</script>
</div>
<script>
var change = function(){
document.getElementById('start').innerHTML +=document.write("<p>NO</p>");
};
</script>
<input type = "button" value =start onClick = "change(); return false;"/>
<body>
</html>
With this it refreshes the page and I need it to be added to the div "start". Any Ideas? I have been looking up things online with fixes and none seem to work for me. I use chrome, I don't know if that will help.

Try this:
var change = function(){
document.getElementById('start').innerHTML += "<p>NO</p>";
};

This is a similar question of question on SO.
Is as to avoid of the use document.write("<p>NO</p>"); because this needs to refresh page.
Then I suggest for you use document.getElementById('start').innerHTML +="<p>NO</p>";
Or create the element!!
var p= document.createElement('P');
p.appendChild( document.createTextNode("NO") );
document.getElementById("start").appendChild(p);

Yup, what sjkm said. document.write does not return anything, it just appends whatever you give it to the end of the document. Also, your Go variable isn't declared and has no value assigned to it

Related

Random button that reload a div or script not page using jquery or javascript

I'm really new at this and I need a random button on my page that would show a new line of information in a div every time someone click on the random button. I was also wondering if there is over 800 lines is it possible to put it in an outside file as txt or html.
Here is what I got so far and well it doesn't work and I'm getting confuse... Please help
<script type="text/javascript" src="jquery-2.2.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#text').hide();
$('a#random').click(function(){
$('#text').toggle();
})
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
document.getElementById('#text').innerHTML=textarray[rannum];
}
var textarray = [
"Hello",
"How are you",
"Good Bye"
];
$("#text").load()
})
</script>
<body>
<div id="text">Line to Show</div>
RANDOM
</body>
Uh. Pretty much this:
$('a#random').click(function(){
$('#text').toggle();
RndText(); //you're good
});
Although I will point out that RndText() uses document.getElementById when it could use $("#text") instead. (there's a .html() method that will write the value instead of the .innerHTML property).
document.getElementById is also not currently working because you used "#text" instead of "text", jQuery uses CSS selectors, getElementById does not.
Add execution of RndText when you clicks on Random button.
$('a#random').click(function(){
$('#text').show();
RndText();
})
This will give you a button and you can run this code by clicking the button below. However, I did not quite understand you second part of the question: 800 lines in separate file, what do you wanna do with it? Tell me so that I can helo you further...
Editted:
<?php
$data = file_get_contents('demo.txt');
$lines= split("\n",$data);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
var textarray = <?php echo json_encode($lines); ?>;
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
$('#text').text(textarray[rannum]);
console.log(textarray[rannum]+" "+rannum+" "+textarray.length);
}
$(document).ready(function(){
$('#text').hide();
$('#random').click(function(){
$('#text').show();
RndText();
});
});
</script>
<body>
<div id="text"></div>
<button id="random">RANDOM</button>
</body>

Set value element to a other page called by window.open()

I'm struggling to implement this case, I really appreciate your help.
UPDATE :
page1.html
<html>
<head>
<title></title>
</head>
<body >
<form>
filled value : <input type="text" id="one">
</form>
</body>
</html>
page2.html
<form>
<input type="button" onclick='go();' value='call_page1'/>
</form>
First attempt : page1 shows up, but value is not set
<script>
function go(){
var newWindow;
newWindow= window.open('page1.html', 'form', 'width=400,height=350');
newWindow.document.getElemetById('one').value='xxx';
}
</script>
Second attempt : page1 is not even shown up
<script>
function go(){
var detailsWindow;
detailsWindow = window.open('page1.html', 'form', 'width=400,height=350');
detailsWindow.onload = function{
document.getElementById('one').value='test';
}
}
<script>
Question : setting value' value to page1.html, when it's called in page2.html?
Or if there's an alternative (but please take it easy on me, i'm just learning this stuff ). I don't use JQuery, if there's something unclear, i'm happy to hear it.
regard.
// page1.html
<script>
var newWindow = window.open('page2.html', 'formUntukUpdate', 'width=400,height=350');
newWindow.onload = function(){
newWindow.document.getElementById('one').value = 'ok 2';
};
</script>
// page2.html
<input type="text" id="one" value="ok" />
First of all javascript is case sensetive, and n is missing. so replace getElemetByID with getElementById.
Second is that the code executes immediately and doesn't wait the page to load. You must wrap your code in window.onload :
newWindow.onload = function(){
newWindow.document.getElementById('one').value='xxx';
}
there's 3 bugs in the update:
function in detailsWindow.onload = function must be declared with detailsWindow.onload = function() to work.
your end script is must be replaced from <script> to </script>
you are missing detailsWindow in document.getElementById('one').value = 'test'; it must be detailsWindow.document.getElementById('one').value = 'test';

Internet Explorer 8 error, Object Required (JavaScript)

I wrote a todo in chrome that works fine. I tested it in IE8 and it didn't work. So I made a new file to write specifically in IE8, and I can't even get a simple function to work properly. I would like help in finding out what i'm doing wrong. Thank you to anyone that can school me on this.
HTML
<body>
<p>Home</p>
<form id="form1">
<input type="text" id="inItemText" />
</form>
<button id="btn1" onclick="doIt()">Press Here</button>
<p id="p1"></p>
</body>
Javascript
var inItemText = document.getElementById("inItemText");
function doIt() {
var itemText;
itemText = inItemText.value;
document.getElementById("p1").innerHTML = itemText;
form1.reset();
}
Make sure you do the inItemText assignment after the DOM has been loaded. Otherwise, document.getElementById("inItemText") won't find the element, because it doesn't exist yet.
Either put it at the end of the <body>, or use window.onload:
var inItemText;
window.onload = function() {
inItemText = document.getElementById("inItemText");
};
You're getting that error because inItemText isn't defined. Use document.getElementById('inItemText').
I think the issue is in this line:
itemText = inItemText.value;
You need to declare "inItemText" as a variable.
Perhaps replace it with:
itemText = document.getElementById("inItemText").value

.innerHTML problems storing it into a variable

Here is my code that is not working - thanks guys - first question!
<html>
<head>
<script type="text/javascript">
var x =document.getElementById("myElementId").innerHTML;
</script>
</head>
<body>
<div id="myElementId">24</div>
<div>
<script type="text/javascript">
if (x < 25) {
document.write("worked")
}
else {
document.write("didn't work")
}
</script>
Also sorry for the update but do you guys have an idea of how to do this when the div is in an iframe thats not on the same domain? Thanks
This line
var x = document.getElementById("myElementId").innerHTML;
is executed before the element with ID myElementId exists, so JavaScript cannot find it (getElementById returns null).
Put it after the element:
<div id="myElementId">24</div>
<script>
var x = document.getElementById("myElementId").innerHTML;
</script>
The HTML document is processed from top to bottom.
You're running this line:
var x =document.getElementById("myElementId").innerHTML;
before the element exists. Remove the script from the head an put that line right before:
if(x < 25) {
Instead.
In addition to the creating the element first,
I believe innerHtml returns a string value
Try parsing it first;
var value = document.getElementById("myElementId").innerHTML;
var x = parseInt(value,10)
change it to:
<html>
<head>
</head>
<body>
<div id="myElementId">24</div>
<div>
<script type="text/javascript">
var x =document.getElementById("myElementId").innerHTML;
if (x < 25) {
document.write("worked")
}
else {
document.write("didn't work")
}
</script>
the element that you are trying to look for does not even exist on the page when you run the script that is why you have run into this issue..
document.getElementById("myElementId").innerHTML;
You have to use a # with Id and . with class in it
document.getElementById("#myElementId").innerHTML;

Variable not sent to other function

I have a number of links, that when clicked on, passes a variable thru to another portion of the page.
Yet, for some reason, I can’t figure it out! What am I missing?
<head>
<script type="text/javascript">
function myFunction(a){
myid="Hi There!"+a;
return myid;
}
</script>
</head>
<body>
Click Me<br />
<script type="text/javascript">
document.write(myid);
</script>
</body>
You are getting a little mixed up here. Even though the function returns a value, it has nothing to return it to. Try this:
<head>
<script type="text/javascript">
function myFunction(a){
myid="Hi There!"+a;
document.getElementById("debug").innerHTML = myid;
}
</script>
</head>
<body>
Click Me<br />
<div id="debug"></div>
</body>
if you want to use it later you need to declare myid as a global variable. its scope is currently only within myFunction. also the document.write() function will only execute at runtime so you need to have another function the executes that with every click, or just combine the two.
When you click the link all that happens is that the myFunction() is called which returns the string. The line document.write(myid); is not executed anymore so nothing is visible.
<script>
// This is global
var myid = ''
myfunc = function(a){
myid = "Hi There!" + a;
alert(myid);
}
test_global = function(){
alert(myid);
}
</script>
Set MYID
<input type="button" onclick="test_global();" value="Test MYID" />
Here is a simple example of some similar stuff:
clickme or ClickMeAlso
<input id='other' type='text'/>
<script>
function myfunc(a) {
return a + " howdy";
};
</script>
You can see this in action here:http://jsfiddle.net/5Sbn2/

Categories

Resources