how to set a data-id in javascript? - javascript

I want to set data-id after the user put a URL in an input, already tried a lot of samples that I found here and none of these worked...
//https://imgur.com/SPrSZV7 im trying with this url
function getUrl() {
var txt = document.getElementById('txtURL').value;
var novaURL = txt.replace('https://imgur.com/', '');
document.getElementById('resultado').innerHTML = novaURL;
imagem = document.getElementById('imagem').setAttribute('data-id', novaURL);
}
<script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
<!-- ... -->
<input type="text" id="txtURL">
<input onclick="getUrl()" type="submit">
<h3 id="resultado">Resultado:</h3>
<blockquote id="imagem" class="imgur-embed-pub" lang="en" data-id="">
</blockquote>
the data-id should be SPrSZV7, I got in the console the error Cannot read property 'setAttribute' of null, why is this null?

What's happening is the imgur embed library is loading and overwriting your blockquote with an iframe, so your ID of "imagem" disappears when the iframe loads in its place. Trying wrapping the blockquote with a div container that has data-id attribute, and setting the data value there for reference. Or you can try and reference the imgur iframe ID that appears when embed happens: 'imgur-embed-iframe-pub-' instead of using a div wrapper. Please see the following example:
//https://imgur.com/SPrSZV7 im trying with this url
function getUrl() {
var txt = document.getElementById('txtURL').value;
var novaURL = txt.replace('https://imgur.com/', '');
document.getElementById('resultado').innerHTML = novaURL;
var imagem = document.getElementById('container-for-imgur');
imagem.dataset.id = novaURL;
console.log(imagem.dataset.id);
}
<script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
<input type="text" id="txtURL" value="https://imgur.com/SPrSZV7" />
<input onclick="getUrl()" type="submit" />
<h3 id="resultado">Resultado:</h3>
<div id="container-for-imgur" data-id="">
<blockquote id="imagem" class="imgur-embed-pub" lang="en" data-id="">
</blockquote>
</div>

why is this null?
because you pass your JS code before body code ?
use dataset => https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
document.getElementById('imagem').dataset.id = novaURL;
remark : there is no return value so do not use imagem =

Your code works. You can see in inspect that the data attribute is correctly set up. You must have been experiencing a script load problem in which the content DOM is not loaded before the script execution.
//https://imgur.com/SPrSZV7 im trying with this url
function getUrl() {
var txt = document.getElementById('txtURL').value;
var novaURL = txt.replace('https://imgur.com/', '');
document.getElementById('resultado').innerHTML = novaURL;
imagem = document.getElementById('imagem').setAttribute('data-id', novaURL);
}
<input type="text" id="txtURL">
<input onclick="getUrl()" type="submit">
<h3 id="resultado">Resultado:</h3>
<blockquote id="imagem" class="imgur-embed-pub" lang="en" data-id="">
</blockquote>

Related

Assign Button id to a variable using javascript

i tried getting the button id, setting it as a variable and set it as inner element of a paragraph tag. but it is failing, im not sure where i messed up the process.
here is what i have done so far.
dont worry about the innerhtml being wrong, it works when i replace it with string texts. i just removed the rest so its clearer
let me know if im missing some key information. ill edit it right away
<script>
function ViewDetail(clicked_id) {
let btnid = obj.id;
document.getElementById("outme").innerHTML = btnid;
}
</script>
View
<div class="modal-body">
<p id='outme'>default id</p>
</div>
Have added Id attributes in button:
<script>
function ViewDetail(btnid) {
let btnid = obj.id;
document.getElementById("outme").innerHTML = btnid;
}
</script>
Added Id attributes:
<a id="<?=$rows['id']?>" href="view.php?id=<?=$rows['id']?>" class="btn btn-primary" onclick="ViewDetail(this.id)" data-toggle="modal" data-target="#myModal">View</a>
<div class="modal-body">
<p id='outme'>default id</p>
</div>

document.createElement flashes up with what I want. Then it disappears

I'm having a small issue with my code. I want the user's input to appear on the screen, like a chatbot. However, it is not doing this. What it's doing instead is flashing up with what I want. Then it is disappearing. Just the message, not the entire thing, but that sometimes happens as well. What has happened and how can I fix it?
function executeNewMessage() {
var messagecontainer = document.getElementById("message");
var message = messagecontainer.value;
var newmessagediv = document.createElement("DIV");
newmessagediv.innerHTML = message;
document.getElementById("bodymessages").appendChild(newmessagediv);
}
<div id="site">
<div id="head">
Chatbot
</div>
<div id="body">
<div id="bodymessages"></div>
<span id="bottom"></span>
</div>
<div id="foot">
<form>
<label for="message">Type your message here</label>
<input id="message" type="text" />
<a href="#bottom">
<button id="submit" onclick="executeNewMessage()">→</button>
</a>
</form>
</div>
</div>
The reason that this is happening is because you are using HTML form. The default behavior for form is that they try to submit to the server. That's why you only see the change for a short duration and the page reloads again. Hence, you need to use preventDefault() method.
So, your function should look like this:
function executeNewMessage(e) { //Here e is the event object
var messagecontainer = document.getElementById("message");
var message = messagecontainer.value;
var newmessagediv = document.createElement("DIV");
newmessagediv.innerHTML = message;
document.getElementById("bodymessages").appendChild(newmessagediv);
e.preventDefault();
}
So, what the preventDefault() does is that it prevents the default action of an event.
https://www.w3schools.com/jsref/event_preventdefault.asp

Hw do I clck the add btn and it display the info in the input field and display it n a <p> created with JS. (no inline JS)

Im trying to take the user input and add it to the page with the click of the button and add it to the page in a new paragraph element created thru javascript, I didn't want to use any inline javascript and I wanted to use as little html as possible and do it mainly thru javascript.
<body>
<div class="input">
<form>
<input id="input" type="text" placeholder="Enter task to do..." />
<button id="add_btn">Add</button>
</form>
</div>
<div class="task_list">
<ul id="todo">
<li></li>
</ul>
</div>
<script>
//take user input and add it to the page as a task to do
let div = document.querySelector('.task_list');
let input = document.querySelector('#input')
let pElement = document.createElement('p');
let add = document.getElementById('add_btn');
div.appendChild(pElement);
add.addEventListener(onclick, function (){
input.value;
pElement.innerHTML = input;
console.log(add);
});
</script>
You've got some problems with your code:
You're wrongly binding the event listener. You should use 'click' instead of onclick (which isn't defined anyway).
You didn't define any button type, so the button is treated as submit button, by default. Add type="button" attribute so that the page doesn't refresh on clicking on it.
In the event listener, you should create a fresh p element always, and assign its textContent with input.value (unless you're dealing with HTML content, in which case, innerHTML would be appropriate).
The following snippet makes the code work. Not sure what end result should be like (e.g. you may want to append the list items in ul), but this can get you on track.
//take user input and add it to the page as a task to do
let div = document.querySelector('.task_list');
let input = document.querySelector('#input')
let add = document.getElementById('add_btn');
add.addEventListener('click', function() {
let pElement = document.createElement('p');
pElement.textContent = input.value;
div.appendChild(pElement);
});
<div class="input">
<form>
<input id="input" type="text" placeholder="Enter task to do...">
<button type="button" id="add_btn">Add</button>
</form>
</div>
<div class="task_list">
<ul id="todo">
<li></li>
</ul>
</div>

inserting link to a tag in javascript

i try to inserting <a> tag in class1 before <lable> and after </label> close </a> tag.
my code
<div class="class1>
<label class="class2">test</label>
</div>
i want to after javascript effected, code output is look like to this
<div class="class1>
<a>
<label class="class2">test</label>
</a>
</div>
please help me to get this result.
my program in php get this result me
<div class="class1>
<label class="class2">test</label>
</div>
i want to when label with this class in result of my php project,java script get change code to upper information i explained
please give me simple way of solution
https://jsfiddle.net/nk50eLpv/
label2Elements = document.getElementsByClassName('class2');
for (var i=0; i<label2Elements.length; i++) {
var elm = label2Elements[i];
var a = document.createElement('a');
a.href="#";
elm.parentNode.insertBefore(a, elm);
a.appendChild(elm);
}

store values with localStorage

I need some help here. Whit this page i want to create own link tags with a image. When you click your image, you'll go to that page you have choose. I think i'm almost done but it does not work! What have i done wrong?!
When I click the img element to open the new page, the image pops up..
<head>
<meta charset="utf-8">
<title>Min Startsida</title>
<script type="text/javascript">
function newLink() {
var myNewLink = document.getElementById("link");
localStorage.setItem(link, myNewLink.value)
};
function newIcon() {
var myNewIcon = document.getElementById("icon");
localStorage.setItem(icon, myNewIcon.value)
};
function varIcon() {
document.getElementById("image").src = localStorage.getItem(icon)
};
</script>
</head>
<body>
<form>
<h1>lägg till länk</h1><br />
<input type="text" id="link"><br />
<input type="text" id="icon"><br />
<button onClick="newLink(), newIcon()">lägg till länk</button>
</form>
<section>
<img src="#" id="image" onLoad="varIcon()">
</section>
</body>
This must be a string:
localStorage.setItem("link", myNewLink.value)
^^^^
what happens here is that the element is used as a key as link is used as an id - key has to be a string. This goes for both the setItem methods and the getItem as well that you use later:
<a href="#" onClick="location.href = localStorage.getItem('link')">
Alos, this must be separated with a semi-column:
<button onClick="newLink(); newIcon()">
^
(I didn't look further than these points)

Categories