I am trying to create buttons that can be moved throughout the page but everything I have tried isn't working for me.
Even running the example on: Move buttons on a page using JavaScript
does not work.
So far my javascript file is only able to create the buttons that I need:
function add(text) {
console.log("New button with text: "+ text);
var word = document.createElement("button");
word.type = "button";
word.id = "magnet";
word.draggable = true;
word.value = text;
word.onclick = "dragstart(event);";
var fridge = document.getElementById("poem");
//fridge.appendChild(word);
word.appendChild(document.createTextNode(text));
fridge.appendChild(word);
$("#addbutton").val(""); }
Can someone explain how to move a button using clientX and clientY?
This is my html file...
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="poetry.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<input type="text" id="addbutton">
<button type="button" onclick="add(addbutton.value);">Add Word</button>
<div id="poem"></div>
</body>
Related
Here I'm trying to set index to my button id, for example if I have button id like unique , second button should have unique0, and third button should have unique1 like this. actually button in each loop so that i am same id with all buttons anyone pls let me know how to achieve it
note: i need button id's like unique0, unique1, unique2
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<button id="unique" type="button" class="btn btn-primary">Primary</button>
</div>
<script>
$(function() {
var index = $("#unique").index(this);
$("#unique").append(index);
)};
</script>
</body>
</html>
Use a loop to change all the IDs.
$(".btn").each(function(i) {
this.id = 'unique' + i;
this.innerText += i;
});
I created a set of buttons when clicked a style is added. I wanted to make it more interesting in that upon clicking another button, the style of the previously clicked button should be removed. Unfortunately, I've no idea how to make that happen. I know it's such a basic question but it's already been a day! Can you guys plz help me with that and end my torture?
Here's the code:
//HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Starter</title>
<!-- font-awesome -->
<link
rel="stylesheet"
href="stylesheet.css"
/>
</head>
<body>
<button>hello</button>
<button>hello</button>
<button>hello</button>
<button>hello</button>
<script src="plzwork.js"></script>
</body>
</html>
//JS
var button = document.querySelectorAll('button')
button.forEach(function(btn){
btn.addEventListener('click', function(){
btn.style.color = "red";
})
});
Try this...
//JS
var button = document.querySelectorAll('button')
for(var i =0; i< button.length; i++){
button[i].onclick = function(){
button.forEach(function(btn){
btn.style = '';
});
this.style.color = 'red';
}
}
i have a "Pause" button with a pause_circle_outline materialize icon, and when it clicked i want to change the text to "Resume" and changing the icon to play_circle_outline, but when i try to change the text it changed the text and deletes the icon. here is my code snippet example:
jQuery(document).ready(function($){
$(document.getElementById("pause_btn")).click(function(){
document.getElementById("pause_btn").innerText = "Resume"
});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src = "Sources/js/select_require.js"></script>
<script src = "Sources/js/routes.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
<a class="waves-effect waves-light btn" id="pause_btn">Pause<i class="material-icons right">pause_circle_outline</i></a>
</body>
</html>
.innerText is a sort of "safe"* way to access a node's innerHTML, which in your case includes both the Pause-text, as well as the <i.../> tag.
A way to solve this is to add a span to hold the text. spans don't do anything (as they are inline elements and are by default formatted/shown as a simple text element), but they help by making the text node selectable by document.querySelector!
Example:
var playing = true
window.addEventListener("load", () => {
document.querySelector("#pause_btn").addEventListener("click", () => {
playing = !playing
if(playing) {
document.querySelector("#pause_btn span").innerText = "Pause"
document.querySelector("#pause_btn i").innerText = "pause_circle_outline"
} else {
document.querySelector("#pause_btn span").innerText = "Resume"
document.querySelector("#pause_btn i").innerText = "play_circle_outline"
}
});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
<a class="waves-effect waves-light btn" id="pause_btn">
<span>Pause</span>
<i class="material-icons right">pause_circle_outline</i>
</a>
</body>
</html>
I also added some extra code to make it clickable multiple times!
*: By safe, in this context, I mean that it's safe from a security issue called XSS. Generally it's better to use innerText when you don't explicitly need to change the HTML itself, but if you do: Make sure that there's NO way a user can input something that gets put into the innerHTML. What I initially meant was simply that writing to either innerHTML and innerText will always overwrite whatever contents the element has, and that innerText is generally the safer of the two.
Both textContent and innerText remove child nodes when altered
Docs
Perhaps place your text within a span with an ID and change its textContent?
that way your i tag should remain untouched.
Have you tried putting the icon along with the text to the innerHTML?
jQuery(document).ready(function($){
$(document.getElementById("pause_btn")).click(function(){
document.getElementById("pause_btn").innerHTML = 'Resume<i class="material-icons right">pause_circle_outline</i>'
});
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src = "Sources/js/select_require.js"></script>
<script src = "Sources/js/routes.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<body>
<a class="waves-effect waves-light btn" id="pause_btn">Pause<i class="material-icons right">pause_circle_outline</i></a>
</body>
</html>
I am a beginner in JavaScript and HTML. I am trying to prevent buttons from submitting forms. It is not working with my below code. It is working when I remove the type:button and return false in the code but if I remove it is always submitting the form.
<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<button type="button" onclick="myFunction1();return false;" style="font-size:24px">Button <i class="fa fa-info-circle"></i></button>
<script type="text/javascript">
function myFunction1(){
}
</body>
</html>
JQUERY
You should be able to do:
$('#formid').submit(false);
or
$('#formid').submit(function(e){ e.preventDefault(); });
To use the jquery library visit the official website
http://jquery.com/download/
PURE JS
document.getElementById('formid').addEventListener('submit', function(e) {
e.preventDefault();
});
here is your example
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
function countRabbits() {
for(var i=1; i<=3; i++) {
alert("Rabbit number " + i);
}
return false;
}
</script>
</head>
<body>
<input type="button" onclick="countRabbits()" value="Count rabbits"/>
</body>
</html>
First of all, take care about closed pair tags. In your snippet you have unclosed script tag. Don't use button where it isn't necessary, but use the input type button instead.
When I click on button Add, I want a dynamic button to be added into the div. I tried but couldn't do it. And I cannot figure out what is where the mistake is, in the code. Here's my code.
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Content</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="stylesheets/bootstrap.css" rel="stylesheet" type="text/css">
<link href="stylesheets/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="stylesheets/bootstrap-theme.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function addinfo()
{
//Create an input type dynamically.
element = document.createElement("button");
element.className='btn btn-default';
var t=document.createTextNode("Edit");
element.appendChild(t);
element.id=t;
//var account=document.getElementById('newaccname').value;
var foo = document.getElementById("acc");
// //Append the element in page (in span).
foo.appendChild(element);
// var d = document.getElementById('acc');
// d.appendChild(i);
}
</script>
</head>
<body>
<button type="submit" name="addaccount" class="btn btn-default" onlick="addinfo()">Add</button>
<div id="acc" style="width:500px;height:100px;border:1px solid #000;"></div>
</body>
</html>
You have a typo in your code. onlick -> onclick
onlick="addinfo()"
should obviously be
onclick="addInfo()"