JavaScript/HTML variable trouble - javascript

This is my code:
<HTML>
<HEADER>
<TITLE>Page</TITLE>
</HEADER>
<SCRIPT LANGUAGE="JavaScript">
var asdf=Math.floor(Math.random()*80000000)
</SCRIPT>
<FORM>
<input type=button
value="button"
onClick="self.location='http://www.roblox.com/place-place?id=$_GET["var asdf"]'">
</FORM>
<BODY>
</BODY>
</HTML>
How do i fix it so the link is random, but also works?


Change the value of onclick to:
"var asdf=Math.floor(Math.random()*80000000); window.location='http://www.roblox.com/place-place?id='+asdf"
This will randomize the ID on every click of the link


try this
<HTML>
<HEADER>
<TITLE>Page</TITLE>
</HEADER>
<SCRIPT LANGUAGE="JavaScript">
function my_func()
{
var asdf= Math.floor(Math.random()*80000000);
window.open("http://www.roblox.com/place-place?id="+asdf);
}
</SCRIPT>
<FORM>
<input type=button value="button" onClick="my_func()">
</FORM>
<BODY>
</BODY>
</HTML>
you can also use window.location instead of window.open.


Use a function,
function redirect(){
self.location='http://www.roblox.com/place-place?id='+asdf;
}
an call the function onclick of input tag

Related

Unable to get Text from styled Textarea

I am unable to get Text from textarea because of some unknown reason, if I try simple textarea without using any javascript library, it is getting text. But when using any library, it shows undefined. Can somebody explain why?
Here is my code:
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<div id="sample">
<!-- <script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> <script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script> -->
<h1>
Testing page for Text Areas
</h1>
<textarea id="area2" style="width: 80%;">
</textarea><br />
<button type="button" onclick="myFunction()" id="submit_text2"> Submit Email </button>
<p id="demo">jkjnjk</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("area2").value;
document.getElementById("demo").innerHTML = x;
console.log(x);
alert(x);
}
</script>
</body>
</html>
Here, it is getting and showing text in Alert
Now if I uncomment the script to enhance my textarea using
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> <script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<div id="sample">
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>
<h1>
Testing page for Text Areas
</h1>
<textarea id="area2" style="width: 80%;">
</textarea><br />
<button type="button" onclick="myFunction()" id="submit_text2"> Submit Email </button>
<p id="demo">jkjnjk</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("area2").value;
document.getElementById("demo").innerHTML = x;
console.log(x);
alert(x);
}
</script>
</body>
</html>
It has gone blank now, (there is no problem with script, I have tried some other as well!

It's because when you are using "styled textarea" it just create something else on top of your textarea. You need to use [nicInstance].getContent(). You can read niceEditor's docs here
In your case since you haven't saved your instance a variable, you should being able to use nicEditors.findEditor('area2').getContent();

page not redirecting in javascript after clicking a button which is inside a form

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<button onclick="demo()" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo()
{
location.href="http://www.google.com";
}
</script>
</body>
</html>
if the button is placed without the form tag it is working properly. If it is placed inside the tags its not getting redirected when clicked on it.

Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.
If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.
<form>
<button type="button" onclick="demo()" name="btn">Click Here</button>
<!-- or you can use input element -->
<input type="button" onclick="demo()" value="Click Here" />
</form>
<script>
function demo() {
window.location.href = "http://www.google.com"
}
</script>

<html>
<head>
<title></title>
</head>
<body>
<form>
<button onclick="return demo()" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo()
{
location.href="http://www.google.com";
return false;
}
</script>
</body>
</html>
This modification prevent the default action of clicking on a button inside a form (which is submitting it) and relocate to google.
If you don't need the form do not use it.

It should be look like this.
<form>
<button onclick="demo(event)" name="btn">click here</button>
<script type="text/javascript">
function demo(e) {
e.preventDefault();
window.location.href = "http://www.google.com";
}
</script>
</form>
or you can try this also
<form>
<button onclick="demo(event)" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo(e) {
e.preventDefault();
window.location.href = "http://www.google.com";
}
</script>

window.location is not working inside the js function

<!DOCTYPE html>
<html>
<head>
<script>
//if i put window.location= "index.php" here not inside js function it worked but I need it to be inside a function
function newLoad() {
window.location= "index.php"
}
</script>
</head>
<body>
<input type="button" value="press here" onclick="newLoad()">
</body>
</html>
any Ideas how can I make it work inside the javascript function ?

Your code works. Howether, you don't need to use javascript.
<a href="index.php">
<button>press here</button>
</a>

javascript galary-the picture can't show

Here is my code, how can I show the image? When I run the web page, it only shows the two buttons but no image...Should I call the function inside my html?
<html>
<script language="JavaScript" type="text/JavaScript">
var photos=new Array()
var which=0
photos[0]='images/title.gif'
photos[1]='images/pinkrice.png'
function backward(){
if (which > 0){
which=which-1
document.images.photoslider.src=photos[which]
}
}
function forward(){
if (which<photos.length-1){
which=which+1
document.images.photoslider.src=photos[which]
}
}
</script>
<head><title>How to Play?</title></head>
<body>
<h1>How to Play??</h1>
<!--steps of how to play, add image here--> <br>
<form>
<input type="button" value="Back" onClick="backward()">
<input type="button" value="Next" onClick="forward()">
</form>
</body>
</html>

I Edited your code. Test this. Now are working. You need a container to show your image. document.images only store your images on cache. you need a tag to show. Download files here
<html>
<head>
<title>How to Play?</title>
<script language="JavaScript" type="text/JavaScript">
var photos=new Array();
var which=0;
photos[0]='images/title.gif';
photos[1]='images/pinkrice.png';
function backward(){
if (which > 0){
which=which-1;
document.getElementById("SliderPhoto").src=photos[which];
}
}
function forward(){
if (which<photos.length-1){
which=which+1;
document.getElementById("SliderPhoto").src=photos[which];
}
}
</script>
</head>
<body>
<h1>How to Play??</h1>
<!--steps of how to play, add image here--> <br>
<img id="SliderPhoto" src="images/title.gif" />
<form>
<input type="button" value="Back" onClick="backward()">
<input type="button" value="Next" onClick="forward()">
</form>
</body>
</html>

Adding a div dynamically using append()

Kindly notify me I am explaining it well or not. I'm using .append() to repeat a div inside a page.
HTML
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append("<div class='Box'>I'm new box by prepend</div>");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<button id="num">Click Me</button>
/body>
</html>
This works good when I add a div repeatedly. But I like to call it externally like the below code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append($('#Box'));
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
/body>
</html>
Why is this not working?

Try using clone():
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$(".Box:first").clone().appendTo("#form");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
</body>
</html>​
You have to create a new element before adding it.
Demo

try this
$(document).ready(function(){
$("#num").click(function () {
$(".Box").first().clone().appendTo("#form");
});
});

Try something like this:-
$("#parent_div").append('<div id="created_div"></div>');

Categories