在html中调用变量

发布于 2024-08-11 10:34:52 字数 690 浏览 2 评论 0原文

我正在尝试制作一个脚本，当您输入十六进制值并按提交时，它将文本颜色更改为输入的颜色。

看来问题是我在变量 new html 中调用变量“userInput”的方式

有什么想法吗？

<script type="text/javascript">

function changeText3(){
    var userInput = document.getElementById('userInput').value;
    var oldHTML = document.getElementById('para').innerHTML;
    var newHTML = "<span style='color:userInput'>" + oldHTML + "</span>";
    document.getElementById('para').innerHTML = newHTML;
}

</script>

<p id='para'>Welcome to the site <b>dude</b> </p> 
<input type='text' id='userInput' value='#' />
<input type='button' onclick='changeText3()' value='Change Text'/>

原文

I am trying to make a script that when you type in a hex value and press submit itchanges the text color to the color inputted.

It seems the problem is the way i am calling the variable "userInput" inside the variable new html

Any Ideas?

<script type="text/javascript">

function changeText3(){
    var userInput = document.getElementById('userInput').value;
    var oldHTML = document.getElementById('para').innerHTML;
    var newHTML = "<span style='color:userInput'>" + oldHTML + "</span>";
    document.getElementById('para').innerHTML = newHTML;
}

</script>

<p id='para'>Welcome to the site <b>dude</b> </p> 
<input type='text' id='userInput' value='#' />
<input type='button' onclick='changeText3()' value='Change Text'/>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦与时光遇 2024-08-18 10:34:52

我建议使用样式参考而不是添加越来越多的跨度：

document.getElementById('para').style.color = userInput;

I would suggest to use the style reference instead of adding more and more spans:

document.getElementById('para').style.color = userInput;

回复收藏 0 原文

层林尽染 2024-08-18 10:34:52

这只是导致问题的一行：

var newHTML = "<span style='color:" + userInput + "'>" + oldHTML + "</span>";

It's just the one line that's causing the problem:

var newHTML = "<span style='color:" + userInput + "'>" + oldHTML + "</span>";

回复收藏 0 原文

陪我终i 2024-08-18 10:34:52

您需要将 userInput 变量“注入”到 newHTML 变量中。见下文;

<script type="text/javascript">

function changeText3(){
    var userInput = document.getElementById('userInput').value;
    var oldHTML = document.getElementById('para').innerHTML;
    var newHTML = "<span style='color:" + userInput + "'>" + oldHTML + "</span>";
    document.getElementById('para').innerHTML = newHTML;
}

</script>

<p id='para'>Welcome to the site <b>dude</b> </p> 
<input type='text' id='userInput' value='#' />
<input type='button' onclick='changeText3()' value='Change Text'/>

you need to "inject" the userInput variable into your newHTML variable. See below;

<script type="text/javascript">

function changeText3(){
    var userInput = document.getElementById('userInput').value;
    var oldHTML = document.getElementById('para').innerHTML;
    var newHTML = "<span style='color:" + userInput + "'>" + oldHTML + "</span>";
    document.getElementById('para').innerHTML = newHTML;
}

</script>

<p id='para'>Welcome to the site <b>dude</b> </p> 
<input type='text' id='userInput' value='#' />
<input type='button' onclick='changeText3()' value='Change Text'/>

回复收藏 0 原文

~没有更多了~