I have this code and trying to print the results but it's not printing, please help. thankyou.
function GetRandom() {
var myElement = document.getElementById("pwbx")
var myArray = ['item 1', 'item 2'];
var item = myArray[(Math.random()*myArray.length)|0];
myElement.value = (item);
}
<!DOCTYPE html>
<html>
<body>
<p> click the button to run the fumction</p>
<button onclick="GetRandom()">Try it</button>
<p id="pwbx"></p>
</body>
</html>
it works where i use the input form type to get the results but i don't want that, i want it to just be echoed as a normal text in the page. thanks. i am a noob in this stuff so looking for help.
function GetRandom() {
var myElement = document.getElementById("pwbx")
var myArray = ['item 1', 'item 2'];
var item = myArray[(Math.random()*myArray.length)|0];
myElement.value = (item);
}
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a random number between 1 and 10.</p>
<button onclick="GetRandom()">Try it</button>
<input name="test" type="text" id="pwbx" value="">
<p id="pwbx"></p>
</body>
</html>
<p> tag doesn't have a value property. Use innerHTML instead.
function GetRandom()
{
var myElement = document.getElementById("pwbx")
var myArray = ['item 1', 'item 2'];
var item = myArray[(Math.random()*myArray.length)|0];
myElement.innerHTML = item;
}
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display a random number between 1 and 10.</p>
<button onclick="GetRandom()">Try it</button>
<p id="pwbx"></p>
</body>
</html>
as Tim said in the comments... you will want to use innerHTML not value for non input tags....
<!DOCTYPE html>
<html>
<body>
<p> click the button to run the fumction</p>
<button onclick="GetRandom()">Try it</button>
<p id="pwbx"></p>
</body>
<script>
var myArray = ['item 1', 'item 2']; //should move this outside of getRandom so it doesn't reallocate each run;
function GetRandom() {
var randomInt = Math.floor(Math.random() * Math.floor(myArray.length));
var item = myArray[randomInt];
document.getElementById("pwbx").innerHTML = item;
}
</script>
</html>
Related
The goal is to be able to click on one of the items and see the description and cost below it. This should be done dynamically. Here is what I have so far:
<!DOCTYPE HTML>
<html>
<head> Assignment 4B
<div id="first" onclick="displayFirst()"> Cleanser </div>
<div id ="second" onclick="displaySecond()"> Exfoliator </div>
<div id ="third" onclick="displayThird()"> Toner </div>
<div id ="fourth" onclick="displayFourth()"> Moisturizer </div>
</head>
<body>
<script type = "text/javascript">
function displayFirst()
{
var d1=document.getElementByID("first");
var text=document.createTextNode("description: will cleanse the face and cost: $20");
d1.appendChild(text);
}
var d2 = document.getElementByID("second");
function displaySecond()
{
var d2=document.getElementByID("second");
var text=document.createTextNode("description: will exfoliate the face and cost: $30");
d1.appendChild(text);
}
var d3 = document.getElementByID("third");
function displayThird()
{
var d1=document.getElementByID("first");
var text=document.createTextNode("description: will toner the face and cost: $15");
d1.appendChild(text);
}
var d4 = document.getElementByID("fourth");
function displayFourth()
{
var d1=document.getElementByID("first");
var text=document.createTextNode("description: will moisturize the face and cost: $50");
d1.appendChild(text);
}
</script>
</body>
</html>
I am able to create the textNode and append it but when I click on the actual item nothing happens. I am not sure if I need to print something out inside each function to get it to display.
i'm trying to obtain the value of an element with javascript but i'm getting undefined as it's value even if i know it isn't.
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to display the first array element, after a string split.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "a,b,c,d,e,f";
var arr = str.split(",");
document.getElementById("demo").innerHTML= arr[0];
alert(document.getElementById("demo").value);
}
</script>
</body>
</html>
How can i obtain the value of "demo" once i changed it?
You are actually setting the innerHTML attribute of the #demo element, not value.
function myFunction() {
var str = "a,b,c,d,e,f";
var arr = str.split(",");
document.getElementById("demo").innerHTML = arr[0];
alert(document.getElementById("demo").innerHTML);
}
<p>Click "Try it" to display the first array element, after a string split.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
I'm trying to print an array to a textarea in JavaScript. My current code only prints the first element instead of all four, and I don't know why.I have tried using a regular for loop as well, but that doesn't make a difference.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var listArray = function()
{
var people = ["Ben", "Joel", "Mary", "Tina"];
var scores = [88, 98, 100, 78];
for (var key in people)
{
var obj = people[key];
var num = scores[key];
var string = obj + ", " + num + "\n";
document.getElementById("box").innerHTML = string;
}
}
window.onload = function()
{
document.getElementById("show_score").onclick = showHighScore;
document.getElementById("list_array").onclick = listArray;
}
</script>
</head>
<body>
<form id="high_score" name="high_score" action="highScore.html" method="get">
<label>Results</label>
<br>
<textarea cols="50" rows="4" id="box"></textarea>
<br>
<input type="button" value="List Array" id="list_array" onclick="listArray">
<br>
<input type="button" value="Show Best Score" id="show_score" onclick="showHighScore">
</form>
</body>
</html>
That is because of this line
document.getElementById("box").innerHTML = string;
So what you are saying, replace the content of textbox with the content of string. So at the end it just have the value of last element.
use this instead
document.getElementById("box").innerHTML += string;
So it will append the next record after previous one.
There is one more problem, on 23rd line it sasys showHighScore is not defined.
I'm kind of new to JQuery.
I've been trying to use this Jquery http://jsfiddle.net/54pp2/2/ ,
<input id="click" type="button" value="click" />
<label id="test">Test</label>
$(document).ready(function () {
var textArray = [];
textArray[0] = 'test 1';
textArray[1] = 'test 2';
textArray[2] = 'test 3';
textArray[3] = 'test 4';
var idx = 0;
$('input#click').on('click', function() {
idx++;
var newidx = idx % textArray.length;
$('label#test').text(textArray[newidx]);
});
});
But when i put it in my theme code, it won't work, even though the jsfiddle shows that it works just fine.
If you want to see: http://dialoguetest.tumblr.com/
(where when you click the pink button on the sidebar, the description text changes. But you can only click it once, unlike the jQuery code that enables the button to be clicked a few times for the text change.)
When i tried to use the jQuery, it won't work: http://dialoguetest2.tumblr.com/
Is there something i'm missing? I know that I have to add
<script type="text/javascript">
and end it with
</script>
in order to make it work. But is there something else i'm missing, like using the Google AJAX Libraries API?
If so, how is it possible?
To make this work in a HTML page you need to place a script reference to jQuery along with your JS code (in a DOM ready handler) in the head. Something like this:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript>
$(document).ready(function () {
var textArray = [];
textArray[0] = 'test 1';
textArray[1] = 'test 2';
textArray[2] = 'test 3';
textArray[3] = 'test 4';
var idx = 0;
$('input#click').on('click', function() {
idx++;
var newidx = idx % textArray.length;
$('label#test').text(textArray[newidx]);
});
});
</script>
</head>
<body>
<input id="click" type="button" value="click" />
<label id="test">Test</label>
</body>
</html>
I'm having trouble, grabbing the user input, and having the onclick operator create additional paragraphs with each click.
Here is my HTML code.
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Add Paragraph </title>
<meta charset='utf-8' >
<script src="../js/addPara.js" type="text/javascript"></script>
</head>
<body>
<div>
<input type='text' id='userParagraph' size='20'>
</div>
<div id="par">
<button id='heading'> Add your paragraph</button>
</div>
</body>
</html>
Here is Javascript code:
window.onload = function() {
document.getElementById("addheading").onclick = pCreate;
};
function pCreate() {
var userPar= document.createElement("p");
var parNew = document.getElementById('userParagraph').value;
userPar.innerHTML = par;
var area = document.getElementById("par");
area.appendChild(userPar);
}
userPar.innerHTML = par;
should be
userPar.innerHTML = parNew;
In your code:
> window.onload = function() {
> document.getElementById("addheading").onclick = pCreate;
> };
Where it is possible (perhaps likely) that an element doesn't exist, best to check before calling methods:
var addButton = document.getElementById("addheading");
if (addButton) {
addButton.onclick = pCreate;
}
Also, there is no element with id "addheading", there is a button with id "heading" though.
> function pCreate() {
> var userPar= document.createElement("p");
> var parNew = document.getElementById('userParagraph').value;
> userPar.innerHTML = par;
I think you mean:
userPar.innerHTML = parNew;
if you don't want users inserting random HTML into your page (perhaps you do), you can treat the input as text:
userPar.appendChild(document.createTextNode(parNew));
.
> var area = document.getElementById("par");
> area.appendChild(userPar);
> }
Your variable names and element ids don't make a lot of sense, you might wish to name them after the data or function they represent.
I did it and it worked.
<html lang='en'>
<head>
<title>Add Paragraph </title>
<meta charset='utf-8' >
<script>
window.onload = function() {
document.getElementById("heading").onclick = pCreate;
}
function pCreate() {
var userPar= document.createElement("p");
var parNew = document.getElementById('userParagraph').value;
userPar.innerHTML = parNew;
var area = document.getElementById("par");
area.appendChild(userPar);
}
</script>
</head>
<body>
<div>
<input type='text' id='userParagraph' size='20'>
</div>
<div id="par">
<button id='heading'> Add your paragraph</button>
</div>
</body>
</html>```