How to transform text area to link? - javascript

Here is my code snippet:
function myFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
<!DOCTYPE html>
<html>
<body>
<textarea id="myTextarea"></textarea>
<button type="button" onclick="myFunction()">Transform into link</button>
<script src="links.js"></script>
</body>
</html>
Somehow, the created link is not opened when I click on it. Kind of stuck at this point.


You were doing it right, you just needed to use href instead of innerHTML.
function myFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").href = x;
}
<!DOCTYPE html>
<html>
<body>
<textarea id="myTextarea"></textarea>
<button type="button" onclick="myFunction()">Transform into link</button>
My Link!
<script src="links.js"></script>
</body>
</html>

Related

How to get anchor tag text to a variable and display as innerHTML?

I have given code below. I want that a variable of JS take anchor tag text as input and display in another Element through innerHTML.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p><a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com</a>
<a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com</a></p>
<p>Click the button to change the value of the href attribute of the link above to "www.cnn.com".</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var x=$(".myAnchor").on("click",function(event){
event.preventDefault();
$(this).text();
});
function myFunction() {
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

What you are doing wrong?
Instead of assigning the click event to a variable, assign the inner text of the clicked link in a variable and on clicking the button assign this variable to the required element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>
<a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com1</a>
<a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com2</a>
</p>
<p>
Click the button to change the value of the href attribute of the link
above to "www.cnn.com".
</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var x = '';
$(".myAnchor").on("click", function(event) {
event.preventDefault();
x = $(this).text();
});
function myFunction() {
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

How do I activate a javascript button as if a user clicked it?

How do I activate a javascript button as if a user clicked it? Could I run javascript code
to activate the button? (supposing I did not already know the code in the button, and I am on a random website where I can not change existing code)
<!DOCTYPE html>
<html>
<body>
<form action="aaa.php">
<input type="text" />
<input id="button" type="submit" />
</form>
<script>
var btn = document.getElementById("button");
//is there anything like: btn.click?
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<button id="button"onclick="myFunction()">b</button>
<!--creates the button-->
<script>
var btn = document.getElementById("button");
btn.click();
function myFunction(){
alert('working');
}
</script>
</html>

Here's one way you can handle it, call a specific function from your onClick
<!DOCTYPE html>
<html>
<button id="button" onclick="clickButton()">b</button>
<!--creates the button-->
<script>
function clickButton() {
alert("hello!");
}
</script>
</html>
To answer your question more directly, this is one way you can do it
document.getElementById('button').onclick=function(){/* some code */}

As mentioned, You can separate out HTML and javascript.
Sample.
<!DOCTYPE html>
<html>
<body>
<button id="button">Click Here</button>
<button onclick="onClickBtn(this)">Click Here 2</button>
<!--creates the button-->
<script>
var btn = document.getElementById("button");
btn.addEventListener("click", (event) => {
alert("Hi")
})
function onClickBtn(event) {
alert("Btn 2")
}
</script>
</body>
</html>

Why does my function works in the HTML file but not in JS file?

I'm creating a web page that has a text area in it and the user can enter code and have it displayed underneath. If I place my function in the HTML file it works just fine but when I move it to the JS file it doesn't work. Any help, even pointing me in the direction of my issue would be appreciated.
Here is my HTML code with the function commented out......
<!DOCTYPE html>
<html>
<head>
<title>DOM TREE 2</title>
<link rel="stylesheet" href="css/Content.css">
<script type="text/javascript" src="JS/js01.js"></script>
</head>
<body style="background-color:lightgray" id="bd">
<div id="third">
<h1> DOM TREE <img src="Images/tree_logo.jpg" alt="Calc" id = "pic">
</h1>
<form id="DOMForm">
<textarea id="myTextarea" rows="4" cols="50"></textarea>
<p><button type="button" onclick="AddFunction()">Add Content</button>
<button type="button" onclick="Change()">Change Style</button>
<button type="button" onclick="Clear()">Clear Content</button>
</p>
<p id="demo"></p>
<!--<script>
function AddFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
</script> -->
</body>
</html>
Here is the JS file with the function.....
function AddFunction()
{
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
function changestyle()
{
}
function clear()
{
document.getElementById("DomForm").reset();
}

Because names are different, compare onclick="Change()" to function changestyle() and onclick="Clear()" to function clear().

How to perform two action while click a button in HTML with js?

<!DOCTYPE html>
<html>
<body>
<h2>DATE&TIME</h2>
<button type="button"
onclick="document.getElementById('sun').innerHTML = Date()">
View Date</button>
<p id="sun"></p>
<button type="button"
onclick="document.getElementById('sun').innerHTML = '
'";"document.getElementById('sun1').innerHTML = 'Press to
View'";>Clear</button>
<p id="sun1"></p>
</body>
</html>
I want to perform two action while button is clicked. My above code was not work. Please give solution.

If you have more than 1 lines go separate user define function using script tag
<!DOCTYPE html>
<html>
<head>
<script>
function clearbtn(){
document.getElementById('sun').innerHTML ='';
document.getElementById('sun1').innerHTML = 'Press to View';
}
function dateTime(){
document.getElementById('sun').innerHTML = Date();
document.getElementById('sun1').innerHTML = '';
}
</script>
</head>
<body>
<h2>DATE&TIME</h2>
<button type="button" onclick="dateTime()">View Date</button>
<p id="sun"></p>
<button type="button" onclick="clearbtn()">Clear</button>
<p id="sun1"></p>
</body>
</html>

Just call a local javascript function
<button type="button" onclick="myFunction();">Clear</button>
<script>
function myFunction()
{
document.getElementById('sun').innerHTML = '';
document.getElementById('sun1').innerHTML = 'Press to View';
}
</script>

First of all, avoid inline javascript !
Gives your button an unique ID
<button type="button" id="datebutt">View Date</button>
<p id="sun"></p>
<button type="button" id="clearbutt">Clear</button>
<p id="sun1"></p>
Then in your script you can do
<script>
document.getElementById("datebutt").addEventListener("click",function(){
document.getElementById('sun').innerHTML = Date()`
},false);
document.getElementById("clear").addEventListener("click",function(){
document.getElementById('sun').innerHTML = '';
document.getElementById('sun1').innerHTML = 'Press to View';
},false);
</script>

I have the best solution for this
In js page :-
function do(){
// your code here
}
function do_more(){
// your code here
}
In Html page :-
<button onclick='do();do_more();'>Button</button>

insert url into address bar

I have been looking at combining the following two ideas as I need to go to a relative URL based on the current URL
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_loc_hostname from which I have:
<script>
function myFunction() {
var x = location.hostname;
document.getElementById("demo").innerHTML= x;
}
</script>
And then:
var newUrl = "";
window.location = newUrl/x;
So that I can have a button on the page to take me from domain1.suffix
to domain2.suffix/domain2.suffix for a page concerning that domain
Can anyone help me piece this together?

Try this code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function GetHost()
{
var protocol = "http://";
var x = location.hostname;
window.open((protocol + x));
document.getElementById("demo").innerText = protocol + x;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="Test It" onclick="GetHost()" />
<p id="demo"></p>
</div>
</form>
</body>
</html>

Try this:
<html>
<head>
<script>
function openWin() {
var x = "http://" + location.hostname;
window.open(x);
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="openWin()">
</form>
</body>
</html>

Categories